Класса изменение не влияет на OnMouseOver

Question

Я использую JQuery 1.7.2 и то, что я пытаюсь сделать, это огнь onmouseover на одном DIV (с классом 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

Я даже используя .on() поэтому она должна быть живой

Неа, .on() только имеет event delegation эффект при передаче потомка аргумент селектора:

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

Вместо того document, вы можете используйте самый близкий статический контейнерный элемент .active для лучшей производительности.

---

Без аргумента селектора потомка, JQuery непосредственно присоединять обработчик событий только к элементам совпавших в объекте JQuery $('.active') в то время он выполняет, точно так, как стенографии .mouseover(fn) и старые методы .bind('mouseover', fn) бы.

Answer 2

На самом деле вы добавляете курсор мыши к элементу с классом = "active", но он запускается один раз, а когда второй div имеет активный класс, он не был связан с наведением мыши над событием. Вы, возможно, потребуется снова перепривязывают событие или связать все элементы с событием мыши, наведении курсора мыши -> активный, MouseOut -> неактивно

Такие, как BIND (событие для всех элементов):

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

Вы можете см. здесь http://jsfiddle.net/ZgHmd/6/

Надеюсь, что эта помощь.