Событие, не работающее с динамически созданным элементом

Question

Я вытягиваю свои волосы, пытаясь понять, почему событие mouseover не будет работать с обработчиком .on с динамически созданным элементом из ajax. Единственное, что, похоже, работает, это код с .live, но я понимаю, что он устарел.

$(".dropdown ul li").live("mouseover", function() { 
alert('mouseover works'); 
}); 

Однако, когда я пытаюсь использовать .он, это не будет работать - независимо от того, какие изменения я стараюсь (document.ready, .mouseover, и т.д. и т.п.)

$(".dropdown ul li").on("mouseover", function() { 
alert('mouseover works'); 
}); 

обработчики событий находятся в в нижней части кода, поэтому они выполняются последним. У кого-нибудь есть представление о том, что я делаю неправильно?

Answer 1

Использование .on для вновь создаваемых элементов с динамической делегации событийhttp://api.jquery.com/on/ - где ваш главный селектором является существующим статического родителя:

$(".static-parent").on("event1 event2", ".dynamic-child", function() { 

или в вашем случае:

$(".dropdown").on("mouseover", "li", function() { 
    alert('mouseover works!!!!!!!!!'); 
}); 

Делегированные события имеют то преимущество, что они могут обрабатывать события из потомков el которые будут добавлены в документ позже. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий. Этот элемент может быть элементом контейнера представления в дизайне Model-View-Controller, например, или документом, если обработчик события хочет контролировать все события пузырьков в документе. Элемент документа доступен в начале документа перед загрузкой любого другого HTML-кода, поэтому безопасно присоединять туда события, не дожидаясь готовности документа.

Также убедитесь, чтобы использовать DOM готова функцию

jQuery(function($) { // DOM is now ready and $ alias secured 

    $(".dropdown").on("mouseover", "li", function() { 
     alert('mouseover works!!!!!!!!!'); 
    }); 

});