Wiążące Wydarzenia Jquery na elementach generowanych przez inne wydarzenia

Question

Jestem stoi problem na wiążącą zdarzenia jquery na przedmiotach stworzonych przez siebie działania, np gdy obciążenie więcej kliknięty link

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

Kiedy kliknij na Załaduj więcej linku, będzie generować więcej elementy, np.

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

Podczas ładowania strony używam następującego skryptu jquery, aby związać mysz i wejść w wydarzenie.

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

To z powodzeniem zastosuje zdarzenie na elementach c_1, c_2, ale gdy załaduje więcej wywołania łącza, wygeneruje więcej elementów. w tym celu odłączam zdarzenia najeżdżania i wiążę je ponownie po utworzeniu nowych elementów w funkcji wywoływanej po kliknięciu łącza z większym obciążeniem.

$(".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');  
      } 
     }); 
    }); 

już Zarówno i załadować więcej elementów prawidłowo wyświetlane na stronie, Ale wciąż unoszą wydarzenia prawidłowo wezwać już tworzyć elementy, ale nie na elementy stworzone przez „obciążenie bardziej” imprezy.

Czy ktoś mi pomoże poprawnie dołączyć wydarzenie do elementów tworzonych dynamicznie poprzez wywoływanie innych zdarzeń lub funkcji jquery.

Answer 1

Na dynamicznej zawartości trzeba będzie przekazać, coś takiego:

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

Należy zastąpić document z najbliższego rodzica, który nie jest wprowadzony z Ajax.

Answer 2

Sprawdźcie w sekcji „Bezpośrednie i delegowanych wydarzenia” dokumentacji on:

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

Można użyć delegacji zdarzeń do radzenia sobie z tym problemem.

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

To wiąże zdarzenie do elementu owijającego (składającej się z identyfikatora itmWrapper, to może być ciało jeśli nie ma wspólny macierzysty) i odnoszą się do wszystkich elementów pasujących do wyboru w tym opakowaniu, niezależnie, gdy są one dodany.