javascript - $ .load（content）の後にjQueryでアクセスできない要素

Question

$.load()メインのhtmlファイルに（別のファイルからの）マークアップを含める関数でjQueryを使用します。index.html

たとえば、次のものを読み込みますcontact.html。

<div id="bloc_load"></div> in 'index.html'

それは正しく機能します。

問題は、contact.html私が持っているものです：

<input type="button" id="button_of_contact">

この要素は読み込まれていますが、次のコマンドindex.htmlでアクセスできません。

$('#button_of_contact').click(function(){
    alert('Click');
});

index.htmlロード後にソースコードを表示すると、次のように表示されcontact.htmlます。

<div id="bloc_load"></div>

はdiv空なので、jQueryはアクセスできないと思います。この問題を解決するにはどうすればよいですか？

score 2 · Accepted Answer

イベントを動的に作成されたhtmlにバインドするには、jQuery.live()またはメソッドが必要です。.on()

使用しているjQueryのバージョンに応じて選択し.live()ます。.on()

.live（）jQuery1.3以降で使用可能です。現在および将来、現在のセレクターに一致するすべての要素にイベントハンドラーをアタッチします。

.on（）jQuery1.7以降で使用可能です。選択した要素に1つ以上のイベントのイベントハンドラー関数をアタッチします。

... jQuery.live（）の場合

$('#button_of_contact').live("click", function(e) {   
    e.preventDefault();  
    // do something;        
});

... jQuery.on（）の場合

$('#button_of_contact').on("click", function(e) {   
    e.preventDefault();  
    // do something;       
});

アップデート

jQuery Docs-jQuery 1.7以降、.delegate（）は.on（）メソッドに置き換えられました。ただし、以前のバージョンでは、イベント委任を使用するための最も効果的な手段であり続けます。イベントのバインドと委任の詳細については、.on（）メソッドを参照してください。

$("#button_of_contact").delegate("input", "click", function() {
    e.preventDefault();  
    // do something; 
});

score 0 · Accepted Answer

コンテンツがロードされていると仮定します：

$("#bloc_load").on('click', '#button_of_contact', function() {
    console.log('click');
});

コンソールをチェックして、ロードされたコンテンツで変更されたコードを確認する必要があります。右クリックしてソースを表示すると、追加されたコンテンツは表示されません。