在对同一元素使用.addClass(）后修改.haverage(）

Modifying .hover() after using .addClass() on the same element

本文关键字：修改 haverage addClass 元素      更新时间：2023-09-26

所以我尝试使用.haverage（）方法，该方法只在悬停的元素没有特定类的情况下执行某些操作。如果我将类添加到HTML中有问题的元素中，效果会很好。但是假设我有一个click事件，它使用.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
})

你们知道吗？

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

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

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

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

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

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

我认为它更像：

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