jQuery Not Recognizing Classes Dodano do strony Dynamically

Question

Pracuję nad projektem, w którym chciałbym dodać wiele elementów tej samej klasy do strony i udostępnić wszystkie te klasy dla $ (selektor) .Kliknij(); obsługa zdarzeń. To, co się dzieje, to żaden z dynamicznie dodawanych elementów tej samej klasy nie reaguje na kliknięcia.

Aby daje lepszy obraz tego, co mam na myśli, że składa się z jsFiddle próbkowania, który jest bardzo podobny do rzeczywistego problemu w moim projekcie:

Link do jsFiddle: http://jsfiddle.net/8LATf/3/

• Jeden element klasy "added_element" znajduje się na stronie już po załadowaniu. Ten element można kliknąć.

• Klawisz jest kliknięty i dodaje do strony inne elementy klasy "added_element" dynamicznie za pomocą append. Żaden z tych elementów nie jest klikalny.

W jaki sposób można klikać wszystkie elementy klasy "added_element"? Zgaduję, że ma to związek z selektorem, którego używam w module obsługi zdarzeń, ale nie byłem w stanie tego rozgryźć.

Każda pomoc jest doceniana !!!

Answer 1

You need to delegate your handler. Najprostszym sposobem jest przekazać wszystko do document wykorzystaniem .on('click', ...) (jest to jak .live() przekształca wewnętrznie, jak jQuery 1.7):

$(document).on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/4/

Jednak w twoim przypadku można przekazywać #container, ponieważ wszystkie dodane elementy pojawiają się w tym. Delegowanie na najbliższy możliwy element DOM jest preferowane ze względów wydajnościowych, kiedy jest to możliwe.

$('#container').on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/5/

Answer 2

Po dołączeniu obsługi zdarzeń do „added_element” te tworzone dynamicznie przez skrypt nie jest w DOM. Więc nie ma obsługi zdarzenia związanego z nowo utworzonym elementem.

Aby obejść ten problem, należy zamiast tego załączyć procedurę obsługi zdarzeń do elementu div zawierającego element div i sprawić, aby szukał elementu "added_element".

jfiddle: http://jsfiddle.net/yKJny/

Answer 3

Trzeba użyć delegacji zdarzeń tutaj, poprawny sposób powiązać zdarzenie będzie:

$('#container').on('click', '.added_element', function() { 
    var id = $(this).attr('id'); 
    alert(id); 
}); 

Oto corrected fiddle.