0

我正在使用 jQuery 1.7.2，我想要做的是onmouseover在一个 div 上触发（使用 class active），但是在onmouseout将此类更改为inactive和第二个 div 的类从inactiveto切换时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。您可以在开发人员工具中看到该类已正确切换，但仍会在第一个上触发事件。

4

2 回答 2

2

我什至在使用.on()所以它应该是活的

不，只有在传递后代选择器参数.on()时才具有事件委托效果：

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

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

如果没有后代选择器参数，jQuery 将在执行时仅将事件处理程序直接附加到 jQuery 对象中匹配的元素$('.active')，就像简写.mouseover(fn)和旧.bind('mouseover', fn)方法一样。

于 2013-06-07T06:46:08.887 回答
0

实际上，您将鼠标悬停添加到具有 class="active" 的元素，但它运行一次，并且当第二个 div 具有活动类时，它尚未与鼠标悬停事件绑定。您可能需要再次重新绑定事件或将所有元素与鼠标事件绑定，mouseover -> active，mouseout -> inactive

如（将事件绑定到所有元素）：

$(document).ready(
function () {
    $('body').on('mouseover', '.myDiv', function() {
        $(this).addClass('active').removeClass('inactive');
        $("#output").text( $(this).attr('class') );
    });
}
);

你可以在这里看到更多http://jsfiddle.net/ZgHmd/6/

希望这有帮助。

于 2013-06-07T07:29:46.483 回答