Javascript 鼠标悬停未触发期间追加的跨度上的Click事件

我将

span

附加到

mouseover

上的

div

，我只想触发对嵌套span的单击。 我觉得我什么都试了都是运气使然

---

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

将您的

mouseover

更改为

mouseenter

，并使用事件委派

$('.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");
});

$（'.container'）。在（'mouseenter'，函数（e）上{
$（this.append（'我希望这是可点击的..'）；
}).on（'mouseleave'，函数（e）{
$（this.find（'.span1'）.remove（）；
});
$（'.container'）。在（'click'，'.span1'，函数（）{
警报（“点击”）；
});

使用mouseover，即使您将鼠标悬停在子跨度上，它也会被触发，并且它会不断删除和追加跨度

从

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

---

您需要使用委派的事件。jQuery文档对此有一个很好的解释：当然！太谢谢你了，PSL，我快发疯了！我会在2分钟内将其设置为已接受。