jquery - jQuery: .load() 経由で読み込まれたページのフォームに ajaxForm をバインドする

Question

jQuery 用の ajaxForm プラグインを使用して、webapp でフォームを送信しています。ただし、アプリの一部で、jQuery の .load() を介してフォームを含むコンテンツを読み込んでいます

問題は、ajaxForm を ajax 経由でロードされたフォームにバインドできないことです。

私はこのコードを無駄に試しました:

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

どんな助けでも本当に感謝しています!!

---

編集：みんなありがとう！これは完全に機能します。

Answer 1

ロードは非同期であるため、バインド コードをコールバックに配置する必要があると思います。

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

最新の jQuery Form Plugin と jQuery 1.7+ を使用している場合は、次のように「委任」オプションを使用できます。

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

ここで説明されています：http://malsup.github.com/jquery.form.js

Answer 3

.load()これは、まだ完成していない時点で ajaxForm をバインドしているためです。これを試して：

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

});