後で読み込まれる要素でスクリプトが機能しない理由はありますか？

Question

最初のページの読み込みが完了した後に読み込まれたときに、コンテナ内のいくつかのjQueryボタンが機能しないことに気付きました。底に

For example, see this

これらのボタン：今日、明日、いくつかの他の日 仕事が、唯一の冒頭に。

あなたは上部のナビゲーション・ボタンを押し

、など などの会場、そしてその後、再び イベントをクリックして、これらのボタンは機能しなくなります。 ページのボタンも操作しないでください。ここで

は、私が持っているコードは、たとえば、次のとおりです。また

<a id="today_button" href="#" title="Click to show events for today"></a> 



jQuery('#today_button').click(function() { 
    jQuery("#today_button").addClass("active"); 
    jQuery("#tomorrow_button").removeClass("active"); 
    jQuery("#some_other_day_button").removeClass("active"); 
}); 

、ボタンを選択します。

<a id="choose_button" href="#" title="Click to search for club events!"></a> 

jQuery('#choose_button').click(function() { 

    $('#whole-ajax-content-one').load('search2.html'); 

}); 

おかげでみんな！ :)

Answer 1

動的に追加された要素を見ては

使用live(deprecated)

$('#choose_button').live('click', function() { ... }); 

またはdelegate

$(document).delegate("#choose_button","click",function(){...}); 

またはイベントに再バインドされる必要があります（1.7+）

$(document).on("click","#choose_button",function(){...}); 

Answer 2

動的HTML要素にイベントを添付する必要がある場合は、onイベントハンドラを使用する必要があります。

次ている

：

jQuery('#choose_button').click(function() { 

この試してください：あなたは、動的な要素のためdocumentオブジェクトにデリゲートを使用する必要があります

jQuery(document).on('click', '#choose_button', function() { 

Answer 3

を。あなたはそれが動的に作成された場合でも、任意の要素にイベントハンドラをアタッチするonを使用することができます1.7以上のver最新のjQueryを使って、この

$(document).delegate('click', 'anyValidSelector', function(){ 

}); 

を試してみてください。

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