jQuery: Bind ajaxForm to a form on a page loaded via .load()

Question

I'm using the ajaxForm plugin for jQuery to submit forms on my webapp. However, in one part of the app, I'm loading some content thathas a form on it via jQuery's .load()

The problem lies in that I can't get ajaxForm to bind to the form loaded via ajax.

I've tried this code to no avail:

 $('#viewRecordBtn').live('click', function() { // Handle the event when the 'view record' button is clicked
    $("#tab2").load('ajax/viewRecord.php'); // Load the record and the form into tab 2
    $('#formAddRecord').ajaxForm(formAddRecordOptions); // Bind the form
 });

Any help is REALLY appreciated!!

---

Edit: Thanks guys! This works perfectly.

Answer 1

I think you should put binding code into a callback, because the load is asynchronous:

 $('#viewRecordBtn').live('click', function() { // Handle the event when the 'view record' button is clicked
    $("#tab2").load('ajax/viewRecord.php', function() {
                    $('#formAddRecord').ajaxForm(formAddRecordOptions); // Bind the form
               }); // Load the record and the form into tab 2    
 });

Answer 2

If you use latest jQuery Form Plugin and jQuery 1.7+ you can use 'delegation' option, like this :

$('#myForm').ajaxForm({
    delegation: true,
    target: '#output'
});

Its described in here: http://malsup.github.com/jquery.form.js

Answer 3

that is because you are binding ajaxForm at the time that the .load() is not yet complete. try this:

$('#tab2').load('ajax/viewRecord.php', function() {
  $('#formAddRecord').ajaxForm(formAddRecordOptions);
});

Answer 4

$('#viewRecordBtn').live('click', function() { 
   $("#tab2").load('ajax/viewRecord.php', function(){
       $('#formAddRecord').ajaxForm(formAddRecordOptions); // Bind the form
   }); // Load the record and the form into tab 2

});