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

Question

Hi,

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

$('#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

});

Answer 2

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 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);
});