單元上的單擊事件（僅在懸停時顯示）未觸發

Question

單擊某個元素時，我無法觸發某個事件，並且此元素僅在懸停td元素時纔會顯示。

//Hovering over a td element displayed a Span 
$('td').hover(
    function() {$(this).append('<span class="editCell">hello</span>')}, 
    function() {$(this).find('span:last').remove()} 
) 

//Clicking on that span, it's supposed to trigger alert. But it doesn't. 

$('.editCell').click(function(){ 

    alert('hello'); 
}) 

Answer 1

因爲.click()事件不適用於動態添加的內容。

使用.on()代替

$("td").on("click", ".editCell" ,function(){ 

}); 

• 第一個參數是你要綁定的事件。
• 第二個參數是選擇器，它過濾td中的所有元素，並僅將click事件綁定到該選擇器。
• 第三個參數是要調用的函數。

以上稱爲delegated-events。

你也可以做這樣的：

$(".editCell").on("click",function(){ 

}); 

Answer 2

這是因爲editCell元件頁面加載之後被追加。您需要將事件委託給最近的靜態元素。試試這個：

$("td").on("click", ".editCell", function() { 
    alert("hello"); 
}); 

的td選擇還是有點廣泛，雖然，你應該把一個id上的editCell最接近的父級的性能着想。