开发者

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 p开发者_开发百科erfectly.


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


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


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


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

});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜