jQuery - AJAXを使用して別のページからロードされた投稿フォーム

Question

JQueryを使用して、ページを再ロードせずにフォームを送信しようとしています。これはスタンドアロンページのjQueryフォームプラグインでうまく動作しますが、AJAXで読み込んだページで動作する必要があります。

<script type="text/javascript"> 
    $('#LoadForm').click(function() { 
    $('#formDiv1').load('FormGen.asp'); 
    }); 
</script> 

私は、ロードされたフォームの提出をクリックしかし、形だけのAJAXを提出するのではなく、ページを提出し、リフレッシュします。

<script type="text/javascript"> 
// wait for the DOM to be loaded 
$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function() { 
     alert("Thank you for your comment!"); 
    }); 
}); 
</script> 

私が呼び出すページにコードを挿入し、そのスタンドアロンを使用すると完璧に動作します。ただし、別のページからフォームをロードしようとしているときには機能しません。

あなたはAJAXによってロードされているものにバインドする on()メソッドを使用する必要が

Answer 1

からhttp://api.jquery.com/on/

Answer 2

すると、ページのロード（あなたはAJAXでロードするため）、要素#myFormはそうページではまだ存在しませんajaxForm()プラグインは初期化されていません。

ajaxコンテンツが正常に読み込まれたら、初期化する必要があります。

$('#formDiv1').load('FormGen.asp', function(data, status, xhr) { 

    // this is executed when the load has finished 
    $('#myForm').ajaxForm(function() { 
     alert("Thank you for your comment!"); 
    }); 

}); 

Answer 3

UPDATE：

eerrrr ...私の悪い、正しく読み取れませんでしたquesionそうするために、ロードが発生したときに実行される.load()メソッドのコールバックパラメータを使用します - Didier Ghysの答えがより適切と思われます。

---

click()は、「クリック」JavaScriptイベントにイベントハンドラをバインドします。スクリプトの実行時にバインディングが実行されます。

あなたはツアー形式をajaxで試しているので、フォームがロードされる前にclick()関数が呼び出されていると思います。したがって、バインディングはありません。

はlive() functionを使用してみてください：

$('#LoadForm').live("click", function() { 
    $('#formDiv1').load('FormGen.asp'); 
    });