Question

所以我正在尝试使用.hover（）方法，该方法仅在元素悬停时才执行某些操作，但没有特定的类。如果我将类添加到HTML中的相关元素，它可以正常工作。但是说我有一个使用.addClass（）的click事件来使用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

})

任何男人和女孩的想法？

Answer 1

.hover()仅向已创建的元素添加事件。您还需要使用.on()为将来的元素创建事件。这意味着您还需要设置父。优选地，父应尽可能接近应具有鼠标事件的 children ，以保存性能。

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

Answer 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类并继续它没有。

Answer 3

我会说它更像是：

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

在同一元素上使用.addClass（）后修改.hover（）

3 个答案: