Как связать .hover() с динамически созданным элементом «li» elemtent?

Question

Все решения, которые я смог найти, предлагают использовать метод .live(). Но на сегодняшний день он устарел.

.hover() отлично работает на элементах «li», которые не создаются динамически. Но как только я добавляю новый «li», .hover() не запускается вообще.

Кто-нибудь это понял?

Answer 1

Событие «зависание» устарело с делегированным обработкой событий, например .on() за .on() jQuery doc pages.

Вместо этого вам необходимо использовать делегированную обработку событий .on() с помощью мыши и мыши и обработчика событий для каждого.

Например:

$(document).on("mouseenter", "li", function() { 
    // hover starts code here 
}); 

$(document).on("mouseleave", "li", function() { 
    // hover ends code here 
}); 

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

Answer 2

Использование JQuery On Попробуйте это:

$(document).on('hover', 'li', function() { 

}); 

Answer 3

Попробуйте

Edit: Sry пропустил Устаревшей событие

$(document).on("mouseenter", "li", function(){ 
     //Your code 
}); 

http://api.jquery.com/live/

fiddle