событие не работает на загруженных элементов

Question

с использованием любого события, такие как mouseenter или click на элементе не будет работать с элементами, нагруженными infinitescroll, jquery.load или jquery.ajax.

Я не понимаю, почему. Я понимаю, что функции должны быть вызваны, но событие click должно по-прежнему работать, потому что загруженные элементы имеют одинаковые классы и такие, но они этого не делают!

Не только событие не будет работать, но если я вспомню его после загрузки новых элементов, уже загруженные элементы теперь накопили два события, так что если вы сделаете что-то вроде $('.class').toggleClass('.anotherclass'), оно добавит и удалит класс, потому что теперь на нем есть два события, а не только один.

Почему это происходит? и как я могу получить событие, которое не будет таким образом накапливаться?

надеюсь, что я был ясен, спасибо!

Answer 1

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

$(document).on("event", "#selector", function(){ 
    //Your code here 
}); 

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

Answer 2

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

// This will be attached to all currently existing elements with class 
// .class, but not to future ones 
$('.class').click(handler); 

Использование on():

// This is attached to the document and if the target of the event 
// matches the provided selector then the event would be triggered 
// on it. Here it doesn't matter whether the element with class 
// .class existed at the time the handler was attached 
$(document).on('click', '.class', handler); 

Мой ответ в основном в комментариях, но в основном разница в ли прямой или делегированы обработчик события.