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选择器仍然有点广泛，但为了提高性能，您应该在最近的父editCell上添加一个id。

不会触发元素上的单击事件（仅在悬停时显示）

2 个答案: