Почему мой селектор jQuery не замечает, когда я удаляю класс? - PullRequest
Новая
       3

Почему мой селектор jQuery не замечает, когда я удаляю класс?

3 голосов
/ 11 января 2011

У меня есть элемент, содержащийся в родительском элементе с классом 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.Я ожидаю, что предупреждение не всплывет, но оно все равно появляется.

Ответы [ 2 ]

6 голосов
/ 11 января 2011

Обработчики назначаются один раз на основе результатов, найденных в селекторе, когда он запускается (я предполагаю, что 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/

1 голос
/ 11 января 2011

jQuery связывается с элементами DOM, которые совпадают при первом связывании события click.

Посмотрите на jQuery в прямом эфире .

...