AJAXによって追加された要素にイベントを追加するには？

Question

私はロードビットの1つは、私は上記のjavascriptが最初のページのロードがロードされている

$(document).ready(function() {  
    $('contact_form').submit(function() { 
     return false; 
    });  
}); 

を使用して送信するイベントを横取りしようとしていますお問い合わせフォームで、これは正常に動作し、AJAXを使用して、いくつかのHTMLを読み込みます。

しかし、私はページにアクセスしてフォームを送信すると、デフォルトのパスに従い、通常のサブミットに従います（これは動作しますが、ほとんどのユーザーに従わないようにするJavaScript以外の互換ルートです）。最初にロードされたページのビットとAJAXを使用してロードされた類似のビットについて、.click()イベントのテストを試行しました。その結果、最初にページにロードされた要素のみが.click()イベントを実行します。

私は、DOMに要素を追加する前にjQueryコードをロードしていることを推測しています（これは最初のページの読み込み時に<script>タグがあります）。これはリスナーを徹底的に私は実際に手掛かりを持っていない）。

私は私の前提で正しいですか？最高の修正は何ですか？

Answer 1

最初にcontact_formは、<contact_form>要素を探しているため、有効なセレクタではありません。 IDで選択する場合は#contact_form、クラスで選択する場合は.contact_formにする必要があります。

第2に、イベントハンドラに関する正しい仮定があります。ショートカットイベントハンドラ（click、submitなど）は、ページロード時にDOMで使用できる要素でのみ機能します。 （AJAX経由など。）

要素は、ページのロード後にDOMに追加されている場合は、その要素にイベントを追加する（jQ1.7 +中）delegate()またはon()を使用する必要があります。

$('body').delegate("#contact_form", "submit", function() { 
    return false; 
)}; 

か：

$('body').on("submit", "#contact_form", function() { 
    return false; 
)}; 

私はここで、親セレクタとしてbodyを使用していますが、あなたは上のイベントを配置しているものに最も近い静的な要素を（つまり、ページのロード時にDOMで利用可能なものである）を使用する必要があります。