javascript - 类更改不会影响 onmouseover

Question

我正在使用 jQuery 1.7.2，我想做的是在一个 div 上触发 onmouseover (使用类 active)，但在 onmouseout 上触发 将该类更改为 inactive，并将第二个 div 的类从 inactive 更改为 active。在此之后，我希望 onmouseover 现在将在第二个 div 上触发(我什至使用 .on() 所以它应该是事件的)，但它不会。这是我的代码:

HTML

<div class="myDiv active first"></div> <div class="myDiv inactive second"></div>

JavaScript

$(document).ready(function () {
   $(".active").on("mouseover", function () {
      $("#output").text("mouseover fired!");
   });

   $(".active").on("mouseout", function () {
      $("#output").text("");
      $(".first").addClass("inactive").removeClass("active");
      $(".second").addClass("active").removeClass("inactive");
   });
});

这是jsFiddle为了它。您可以在开发人员工具中看到该类已正确切换，但事件仍然在第一个类上触发。

Answer 1

I am even using .on() so it should be live

不，.on()只有event delegation传递后代选择器参数时的效果:

$(document).on("mouseover", ".active", function () {

而不是 document ，您可以使用最接近的静态 .active容器元素以获得更好的性能。

<小时/>

如果没有后代选择器参数，jQuery 将直接将事件处理程序仅附加到 jQuery 对象 $('.active') 中匹配的元素。在执行时，与简写 .mouseover(fn) 完全相同和年龄较大的.bind('mouseover', fn)方法会。