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

因此，我尝试使用.hover方法，该方法仅在被悬停的元素没有特定类的情况下执行某些操作。如果我在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

})

有什么想法吗？

只向已经创建的元素添加事件。您还需要使用为将来的元素创建事件。这意味着您还需要设置父级。最好是父级应该尽可能靠近应该有鼠标事件的子级，以节省性能

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

仅向已创建的元素添加事件。您还需要使用为将来的元素创建事件。这意味着您还需要设置父级。最好是父级应该尽可能靠近应该有鼠标事件的子级，以节省性能

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

---

我认为这更像是：

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

---

我认为这更像是：

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

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

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

1您可以使用事件委派，它利用JavaScript事件冒泡的方式，允许您将事件绑定到页面特定部分的父元素，并在事件发生时执行逻辑-这非常有用，原因有二。首先，假设您有一个包含100条记录的表和一个包含一个edit类的链接，当有人单击它时，该类应该触发一个特定的JavaScript函数。如果执行$'a.edit'。请单击fn；jQuery最终会将100个不同的事件绑定到各个元素。这可能会使您的应用程序在较旧的计算机/浏览器中难以运行。其次，它使得当事情发生动态变化时，您可以向表中添加新行，或者从链接中删除编辑类，因为您不想再允许特定行可编辑，您的事件足够智能，可以知道正在发生什么并且仍然有效。在jQuery中，可以使用.on函数进行此操作。仔细阅读这本书。如果您有早期版本的jQuery，则可能必须使用.delegate，如果您正在运行一些非常旧的jQuery函数，则可能需要使用.live

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

运行$selector.hoverfn；与选择器匹配的任何元素都会将事件绑定到它们。如果要添加/更改/删除有关选择器的某些内容，而这些内容稍后会使该元素不再匹配，则事件不会在意，因为它已绑定

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

1您可以使用事件委派，它利用JavaScript事件冒泡的方式，允许您将事件绑定到页面特定部分的父元素，并在事件发生时执行逻辑-这非常有用，原因有二。首先，假设您有一个包含100条记录的表和一个包含一个edit类的链接，当有人单击它时，该类应该触发一个特定的JavaScript函数。如果执行$'a.edit'。请单击fn；jQuery最终会将100个不同的事件绑定到各个元素。这可能会使您的应用程序在较旧的计算机/浏览器中难以运行。其次，它使得当事情发生动态变化时，您可以向表中添加新行，或者从链接中删除编辑类，因为您不想再允许特定行可编辑，您的事件足够智能，可以知道正在发生什么并且仍然有效。在jQuery中，可以使用.on函数进行此操作。仔细阅读这本书。如果您有早期版本的jQuery，则可能必须使用.delegate，如果您正在运行一些非常旧的jQuery函数，则可能需要使用.live

---

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

还值得一提的是，这需要jQuery v1.7+，以防任何人被旧版本卡住。但是，如果您使用的是较旧的版本，则可以使用.onAlso的替代版本，值得一提的是，这需要jQuery v1.7+，以防有人使用较旧的版本。然而，如果你是o n在旧版本中，有.on的替代方案