jquery - 未触发元素上的单击事件（仅在悬停时显示）

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。