javascript - 鼠标悬停期间附加的跨度上的单击事件未触发

Question

我将 a 附加span到 a divon mouseover，我只想触发对嵌套跨度的单击。感觉就像我已经尝试了所有运气。

http://jsfiddle.net/NHHSX/1/

我发现了几个类似的，但不幸的是它们也没有成功。

Answer 1

更改您的mouseovertomouseenter并使用事件委托

$('.container').on('mouseenter', function (e) {
    $(this).append('<span class="span1">I want this to be clickable..</span>');
}).on('mouseleave', function (e) {
    $(this).find('.span1').remove();
});

$('.container').on('click', '.span1', function () {
    alert("click");
});

演示

使用鼠标悬停，即使您将鼠标悬停在子跨度上，它也会被触发，并且它会继续删除和附加跨度。

来自文档

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标进入 Outer 元素而不是 Inner 元素时，会触发处理程序。