jQuery не выполняет обработчик, связанный с динамически создаваемыми элементами

Question

Я использую Jquery для динамической загрузки страниц моего сайта. В основном скрывается и отображается divs в зависимости от того, какой параметр главного меню вы нажимаете.

Проблема связана с подменю, которое находится на каждой странице; при изменении страниц меню изменяется. Я освобождаю <ul> и добавляю новые <li> с каждой сменой страницы.

У меня есть jquery hover и нажмите функции, которые идут с подменю <li>, они работают только, если страница обновлена. Кажется, что функции перестают работать, потому что я удаляю <li>, а затем добавляю новые.

Я не понимаю, почему функции не просто переходят к новому <li>.

Почему это?

Answer 1

От этого я понимаю вашу проблему, возможно, не использует .live() метод .. см. http://api.jquery.com/live/. когда новые li добавлены, DOM уже загружен, и поэтому ваши новые теги li не могут быть прикреплены с помощью .hover() или любого другого события, которое вы хотите. Это может быть не совсем то, что вы ищете .. но должно быть достаточно близко

Answer 2

У меня была та же проблема. jQuery может связывать события только с элементами, которые существуют при загрузке сценария jQuery (загрузка страницы). Чтобы позволить событию повлиять на ваши вновь созданные элементы, вам нужно добавить .live к вашему коду. Как это:

$(".menu").live("hover", function(){ 
    // your action here 
}); 

Более подробную информацию об этом можно найти на сайте http://api.jquery.com/live/ Я считаю, что есть некоторые дополнительные команды, такие как .bind, и т.д., которые делают то же самое или нечто подобное, но я всегда использовал .live I надеюсь, это поможет!

Answer 3

Новый, не устаревший способ сделать это с помощью обработчика .on(), начиная с jQuery 1.7. Если вы используете эту версию вместо .live(), используйте:

$('#menu').on('hover', 'li', function() { ... });