追加後點擊事件不起作用，爲什麼？

我有一個問題，我的jQuery代碼。當我做一個追加，事件點擊只是在第一個img上工作，而不是新的（appened）。追加後點擊事件不起作用，爲什麼？

我的代碼page.htm：

<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del"/> 
<img src="images/add.png" style="cursor:pointer;" title="Add" class="delegate-add" />

我的代碼的jQuery：

// When we click on "add.png", the script add the image del.png 
$('.delegate-add').click(function(){ 

     $('#tableautest').append('<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del" />'); 

}); 




/* The alert just work on the first balise <img src="images/del.png"... 
I don't understand why that's don't work with the new img appended... An idea ?? 
*/ 
    $('.delegate-del').click(function(){ 
      alert("ok"); 

    });

非常感謝你！

來源

2013-06-28 Geoffrey

由於圖像動態添加，你需要使用event delegation註冊事件處理程序

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('#tableautest').on('click', '.delegate-del', function(event) { 
    event.preventDefault(); 
    alert('testlink'); 
});

這將#tableautest元素，降低其範圍內的事件附加到任何圖像檢查整個document元素樹並提高效率。

FIDDLE DEMO

來源

2013-06-28 08:53:27

不錯！這很好！非常感謝你！ – Geoffrey

這是因爲您將click事件綁定到當前具有該類的所有現有元素。之後當您添加具有相同類的元素時，該事件尚未綁定到該元素。

因此，您可以使用.on（）方法，該方法將始終將click事件綁定到具有該類的元素。

$(document).on("click", '.delegate-add', function() { ... });

來源

2013-06-28 08:52:00 Alex

不錯！這也很好！非常感謝你！ :) – Geoffrey

愛你的暱稱btw：D – Alex

。點擊（）將附加事件已經存在的元素。當您使用JavaScript動態創建元素時，它不起作用。

使用。對（）函數來代替：

$('#tableautest').on('click', '.delegate-del', function(e) { 
    e.preventDefault(); 
    alert('ok'); 
});

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

來源

2013-06-28 09:05:16 Amani

追加後點擊事件不起作用，爲什麼？

回答

相關問題