爲什麼腳本不能在稍後加載的元素上工作？

我注意到一個容器內的一些jQuery按鈕在初始頁面加載完成後加載時不起作用。爲什麼腳本不能在稍後加載的元素上工作？

底部那些按鈕：今天，明天，改天工作，但只是剛剛開始。

當您按下導航按鈕，在頂部，如場館，然後點擊事件再次，這些按鈕將不再工作。搜索頁面上的按鈕也沒有。

這裏是我的代碼，例如：

<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'); 

});

謝謝大家！ :)

來源

2011-12-15 pufAmuf

動態添加的元素需要重新綁定到該事件

使用live(deprecated)

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

或delegate

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

或on（1.7+）

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

來源

2011-12-15 16:48:12 Rafay

如果您需要將事件附加到動態HTML元素，您應該使用on事件處理程序。

在那裏你具備以下條件：

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

試試這個：

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

來源

2011-12-15 16:44:57 Matthew

沒有人應該爲新代碼使用`live（）`。 jQuery 1.7+你應該使用`on（）`，舊版本你應該使用`delegate（）`。 – 2011-12-15 16:47:04

是否有`live'的替代品？ – Matthew 2011-12-15 16:47:53

我已經更新了使用當前（而不是廢棄）``on`語法的答案 – Matthew 2011-12-15 16:50:29

您應該document對象動態元素使用委託。試試這個

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

});

隨着最新的jQuery版本1.7+可以使用on增加事件處理程序，即使是動態創建的任何元素。

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

來源

2011-12-15 16:46:27 ShankarSangoli

爲什麼腳本不能在稍後加載的元素上工作？

回答

相關問題