更改元素ID,但jQuery仍会触发调用旧ID的事件.为什么这样做？

Question

我创建了一个小提琴试图调试我遇到的问题,一旦我用jQuery重新排列html元素,那些元素上的悬停事件就不再起作用了.

但是,我在这里遇到了这个有趣的情况:http://jsfiddle.net/4yv1trj4/

我有一个主要div,一旦我将鼠标悬停在它上面就会改变颜色.

$("#block").hover(function() {
     $(this).css("backgroundColor", "red");
}, function() {
    $(this).css("backgroundColor", "#888");        
});

如果单击该按钮,主要divID将更改为block2:

$("#block").attr("id","block2");

但是$("#block").hover()当我盘旋时仍然会发射#block2.此外,所有悬停呼叫#block2都不起作用.是否有一个基本的原理,jQuery如何工作,这可以解释这个？

Answer 1

当你这样做:

$("#block").hover(function() {
    $(this).css("backgroundColor", "red");
}, function() {
    $(this).css("backgroundColor", "#888");        
});

你告诉jQuery要查找带有blockID 的元素并将悬停事件绑定到它.完成此操作后,无论事后ID如何发生,事件都将保持绑定到该元素.

也就是说,除非你有一些解除它的代码,当然.

Answer 2

作为lucasnadalutti回答的扩展:值得注意的是,您可以将绑定添加到容器并产生您期望的结果:

例:

$("body").on("mouseenter", "#block", function () {
    $(this).css("backgroundColor", "red");
}).on('mouseleave', "#block", function () {
    $(this).css("backgroundColor", "#888");
});

注意绑定body,而不是实际元素.保持在后袋的技巧.

演示: jsFiddle

更新:

从评论部分,显然需要警告 - 您应该绑定到页面上最近的元素. body在这里用作一个简单的例子.

虽然我认为这个解决方案很适合你,你应该阅读所有jquery事件是否应绑定到$(文档)？在你开始滥用权力之前.