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

Question

У меня проблема с привязкой события jquery к элементам, созданным с помощью другого действия, например, при нажатии на ссылку "загрузить больше"

e.g there are list of elements
<div class="itm" id="c_1"></div>
<div class="itm" id="c_2"></div>
....

Когда вы нажмете на ссылку "загрузить больше", она сгенерирует больше элементов, например

<div class="itm" id="c_11"></div>
<div class="itm" id="c_12"></div>
...

Во время загрузки страницы я использую следующий скрипт jquery для привязки события ввода и выхода мыши.

$('.itm').on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
});    

Это успешно применит событие к элементам c_1, c_2, но при загрузке большего количества вызовов ссылки будет генерироваться больше элементов. для этого я отсоединяю события при наведении курсора и связываю их снова, как только новые элементы создаются в функции, вызываемой при нажатии на ссылку "загрузить больше".

$(".cmtldmore").on('click', function (e) {
     // Ajax process to load more elements in tray.
     // Unbind hover event
     $('.itm').off();
     // Bind it again
     $('.itm').on({
     mouseenter: function (e) {
           alert('mouse enter');
     },
     mouseleave: function (e) {
           alert('mouse leave');    
            }
        });
    });

Как уже, так и при загрузке большего количества элементов правильно отображаются на странице, но все же при наведении курсора правильно вызывают уже созданные элементы, но не элементы, созданные с помощью события "загрузить больше".

Может ли кто-нибудь помочь мне правильно прикрепить событие к элементам, созданным динамически через вызов других событий или функций jquery.

Answer 1

Для динамического контента вам нужно будет делегировать, что-то вроде этого:

$(document).on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
}, '.itm'); 

Вы должны заменить document с ближайшим родителем, который не вставлен с Ajax.

Answer 2

Взгляните на раздел "Прямые и делегированные события" on документация:

http://api.jquery.com/on/

Вы можете использовать делегирование событий для решения этой проблемы.

$('#itmWrapper').on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
}, '.itm');  

Это свяжет событие с элементом обертки (состоит из идентификатора itmWrapper, это может быть тело, если нет общего родителя) и будет применено ко всем элементам, соответствующим селектору в этой обертке, независимо от того, когда они добавляются.