Удалены класс, кажется, до сих пор там

Question

У меня есть кнопка, которая переключает классы Menue с помощью этого сценария:

$('#btn-menue').click(function() { 
$('#menue').toggleClass('hoverbutton clickbutton'); 
} 

Класса Я начинаю с является «.hoverbutton» и переключение, кажется, работает (проверено это с firebug). Но когда активный класс «.clickbutton», этот сценарий, хотя работы (и, хотя выход консоли ClickButton):

$(".hoverbutton").on({ 
    mouseenter: function() { 
    console.log($(this).attr('class')); 
    } 

Так где же моя ошибка в рассуждениях? IMHO сценарий на «.hoverbutton» не должен работать, когда класс удален. THX для любой помощи.

Answer 1

Проблема связана с тем, что события связаны с загрузкой страницы, когда элемент имеет, имеет класс hoverbutton. Тот факт, что класс удален позже в жизненном цикле страницы, не имеет никакого отношения; событие уже привязано к элементу. Чтобы выполнить то, что вам нужно, вам нужно использовать делегирование событий. Попробуйте следующее:

$(document).on('.hoverbutton', 'mouseenter', function() { 
    console.log($(this).attr('class')); 
}); 

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

Answer 2

Ответ Рори почти прав. Он использовал параметры заказа от метода старого делегата

JQuery 1.4.3+:

$(elements).delegate(selector, events, data, handler); 

JQuery 1.7+:

$(elements).on(events, [selector,] [data,] handler); 

Fixed пример:

$(document).on('mouseenter', '.hoverbutton', function() { 
    console.log($(this).attr('class')); 
}); 

Answer 3

Удаление класса Безразлично Не удаляйте прослушивание событий, которое вы уже добавили при загрузке страницы. Если вы хотите удалить прослушиватель событий в JQuery, то вам нужно использовать .off()

вы могли бы, например:

$('#btn-menue').click(function() { 
    $('#menue').toggleClass('hoverbutton clickbutton'); 
    $('#menue).off("mouseenter"); 
}