1

因此，我尝试使用 .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

})

任何想法男孩和女孩？

4

3 回答 3

4

.hover()仅向已创建的元素添加事件。您还需要.on()用于为未来元素创建事件。这意味着您还需要设置父级。最好父母应该尽可能靠近应该有鼠标事件的孩子，以节省性能。

$('#parent').on({
    mouseenter : function() {
        "use strict";
        // Do something
    },
    mouseleave: function() {
        "use strict";
        // Do something
    }
}, ".foo:not(.bar)");
于 2012-08-23T21:46:34.147 回答
1

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

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

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

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

于 2012-08-23T21:54:18.193 回答
0

我会说它更像是：

$( '.foo' ).hover(
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } },
 function() { if ( $( this ).has( '.bar' ) ) {} else { // do something } }
);
于 2012-08-23T21:53:56.663 回答