Почему мой селектор jQuery не замечает при удалении класса?
-
10-10-2019 - |
Вопрос
У меня есть элемент, содержащийся в родительском элементе с классом active
, вот так:
<div class="active">
<div class="button"></div>
</div>
У меня настроен jQuery, чтобы справиться с нажатием на мой button
div, но только если это Div содержится active
родитель, как так:
$('.active .button').click(function(){
alert('Button clicked!');
});
Я использую jQuery, чтобы удалить active
Класс от родителя и даже после удаления класса, предупреждение все еще появляется, когда я нажимаю на кнопку. Это кажется очень необычным, так как кнопка больше не соответствует критериям селектора. Это происходит в Chrome, Firefox и IE, так что это кажется преднамеренным поведением. Я что-то упускаю? Или есть хотя бы простой способ обезболивания?
Вот простой пример JSFiddle для целей тестирования: http://jsfiddle.net/kjudy/. Анкет Нажмите на поле в верхнем ряду. Это выявляет предупреждение и устраняет active
класс, как и ожидалось. Проблема возникает, когда вы нажимаете поле в верхнем ряду даже после active
класс ушел. Я ожидаю, что предупреждение не появится, но это все еще так.
Решение
Художники назначаются один раз на основе результатов, найденных в селекторе при запуске (я предполагаю, что на DOM Ready).
Модификация класса этих элементов впоследствии не влияет на связанные обработчики.
Если вы хотите, чтобы это было более динамичным, поместите а .delegate()
Вместо этого обработчик на предке элементов,
$('#someContainer').delegate('.active .button','click',function(){
alert('Button clicked!');
});
Если единственный контейнер, который охватывает все элементы, - это <body>
, затем используйте это:
$('body').delegate('.active .button','click',function(){
alert('Button clicked!');
});
Ваш пример, обновленный: http://jsfiddle.net/kjudy/1/
Другие советы
jQuery является обязательным с элементами DOM, которые совпадают, когда вы сначала связываете событие Click.
Посмотрите на jQuery жить.