Question

我正在使用jQuery 1.7.2而我正在尝试做的是在一个div上激活onmouseover（使用类active），但在onmouseout上将此类更改为{ {1}}和第二个div类从inactive切换到inactive。在此之后，我希望onmouseover现在将被解雇第二个div（我甚至使用active所以它应该是活的），但它不会。这是我的代码：

HTML

.on()

的JavaScript

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

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

Answer 1

我甚至使用.on()所以它应该是实时的

Nope，.on()在传递后代选择器参数时只有event delegation效果：

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

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

如果没有后代选择器参数，jQuery将直接将事件处理程序附加到jQuery对象$('.active')在执行时匹配的元素，就像速记.mouseover(fn)和较旧的{{1方法会。

Answer 2

您实际上将鼠标悬停在具有class =“active”的元素上，但它运行一次，当第二个div具有活动类时，它尚未与鼠标悬停事件绑定。您可能需要再次重新绑定事件或使用鼠标事件绑定所有元素，mouseover - ＆gt;有效，mouseout - ＆gt;非活性

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

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

您可以在此处查看更多内容http://jsfiddle.net/ZgHmd/6/

希望得到这个帮助。

类更改不会影响onmouseover

2 个答案: