Search code examples
jqueryajaxformsbindajaxform

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


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.


Solution

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