Связывание одного элемента дважды не работает в jQuery

Question

Если я запускаю следующую программу дважды, событие click никогда не запускается. Однако, если я делаю это три раза, это работает. Почему это?

function categorychange() { 
    $('.card').click(function() { 
     $(this).children().children("p").children().toggle(); 
     $(this).toggleClass('mdl'); 
     $('.mdl-black').toggle(); 
    }); 
} 

Answer 1

Проблема в том, что каждый раз, когда вы добавляете обработчик событий к элементу .card вы добавляете еще один вызов toggle() указанные элементы. Когда вы переключаете что-то определенное количество раз, оно возвращается к состоянию, в котором оно было первоначально, поэтому ничего не происходит.

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

$(document).on('click', '.card', function(){ 
    $(this).toggleClass('mdl').children().children("p").children().toggle(); 
    $('.mdl-black').toggle(); 
}); 

В качестве альтернативы можно использовать off() развязывать существующие обработчики событий перед переплетом новые в categorychange() функции:

function categorychange(){ 
    $('.card').off().click(function() { // note .off() here 
     $(this).toggleClass('mdl').children().children("p").children().toggle(); 
     $('.mdl-black').toggle(); 
    }); 
} 

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