jquery - 更改元素 ID，但 jQuery 仍然触发调用旧 ID 的事件。为什么这有效？

Question

我创建了一个 fiddle 来尝试调试我遇到的问题，一旦我使用 jQuery 重新排列 html 元素，这些元素上的悬停事件就不再起作用。

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

我有一个主div，当我将鼠标悬停在它上面时，它会改变颜色。

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

如果单击该按钮，主 div 的 ID 会更改为 block2:

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

但是当我将鼠标悬停在#block2 上时，$("#block").hover() 仍然会触发。此外，#block2 上的所有悬停调用都不起作用。 jQuery 工作原理是否有一个基本原理可以解释这一点？

Answer 1

当你这样做时:

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

您告诉 jQuery 查找具有 block ID 的元素并将悬停事件绑定(bind)到它。完成此操作后，事件将保持绑定(bind)到该元素，无论其 ID 之后发生什么情况。

也就是说，除非您有一些代码 unbinds当然是它。