在同一元素上使用 .addClass() 后修改 .hover()答案

【问题标题】：Modifying .hover() after using .addClass() on the same element在同一元素上使用 .addClass() 后修改 .hover()
【发布时间】：2012-08-23 21:43:47
【问题描述】：

所以我尝试使用 .hover() 方法，该方法仅在悬停的元素没有特定类时才执行某些操作。如果我将类添加到 HTML 中的相关元素，它工作正常。但是假设我有一个使用 .addClass() 使用 jQuery 添加类的单击事件。然后 hover() 方法会忽略已添加的类。够啰嗦了。这是代码。

$('.foo:not(.bar)').hover(function() { 

    someCrap();  //when hovering a over .foo that doesn't also have the class .bar, do someCrap

}

$('.foo').click(function(){

    $(this).addClass('bar'); //after the element .foo gets another class .bar, the hover event written earlier continues to work, WTF

})

男生女生有什么想法吗？

【问题讨论】：

标签： javascript jquery addclass jquery-hover

【解决方案1】：

.hover() 仅将事件添加到已创建的元素。您还需要使用.on() 来为未来的元素创建事件。这意味着您还需要设置一个 parent。 parent 最好尽可能靠近应该有鼠标事件的 children，以节省性能。

$('#parent').on({
    mouseenter : function() {
        "use strict";
        // Do something
    },
    mouseleave: function() {
        "use strict";
        // Do something
    }
}, ".foo:not(.bar)");

【讨论】：

另外值得一提的是，这需要 jQuery v1.7+，以防万一有人被旧版本卡住。但是，如果您使用的是旧版本，则可以使用 .on() 的替代品

【解决方案2】：

当您运行$(selector).hover(fn); 时，任何匹配选择器 的元素都会将事件绑定到它们。如果您要添加/更改/删除有关选择器的某些内容，稍后会使该元素不再匹配，则该事件将不在乎，因为它已经被绑定了。

有几种方法可以处理这个问题，这实际上取决于应用程序中 JavaScript 的数量和用例的具体情况。

1) 您可以使用 事件委托，它利用 JavaScript 事件冒泡的方式允许您将事件绑定到页面特定部分的父元素并在事件发生的时间 - 这非常有用，有几个原因。第一，假设您有一个包含 100 条记录的表和一个带有 edit 类的链接，当有人点击它时应该触发一个特定的 JavaScript 函数。如果你这样做$('a.edit').click(fn); jQuery 最终将绑定 100 个不同的事件到各个元素。这可能会使您的应用程序在较旧的机器/浏览器中遇到困难。其次，它使得当事情动态变化时（您向表中添加新行或从链接中删除编辑类，因为您不再希望允许特定行可编辑）您的事件足够聪明，可以知道发生了什么并且仍然有效。在 jQuery 中，您为此使用 .on() 函数。阅读documentation。如果您有早期版本的 jQuery，您可能必须使用 .delegate()，如果您正在运行一些非常旧的 jQuery 函数，您正在寻找 .live()。

2) 如果您的应用程序相对较小，一种更简单的方法是简单地将事件绑定到所有 .foo 元素并在事件本身中检查该元素当前是否具有 bar 类，如果没有则继续.

【讨论】：

【解决方案3】：

我会说它更像：

$( '.foo' ).hover(
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } },
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } }
);

【讨论】：