Question

我创建了一个小提琴尝试调试我遇到的问题，一旦我用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");

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

Answer 1

执行此操作时：

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

你告诉jQuery要查找具有block ID的元素并将hover事件绑定到它。完成此操作后，无论事后ID如何发生，事件都将保持绑定到该元素。

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

Answer 2

作为lucasnadalutti回答的延伸：值得注意的是，您可以将绑定添加到容器中并产生您期望的结果：

示例：

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

注意body上的绑定，而不是实际的元素。保留在后袋里的诀窍。

演示： jsFiddle

更新：

在评论部分，需要明确警告 - 您应该绑定到页面上最近的元素。这里使用body作为一个简单的例子。

虽然我认为此解决方案会优雅地适合您，但在开始滥用此功能之前，您应该先阅读 Should all jquery events be bound to $(document)? 。

Answer 3

如果你删除了jQuery悬停监听器并添加了一个CSS悬停，它会按照你想要的方式工作：

#block:hover {
    background-color:red;
    width:300px;
    height:300px;
}

Answer 4

$("#block")正在寻找特定的DOM对象。 .hover()会将悬停事件绑定到该DOM对象。 $("#block").attr("id","block2");将更改该DOM对象的属性（id），但悬停事件仍然绑定到它。

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

4 个答案: