Dynamicznie dodać obsługi zdarzeń jQuery do dynamicznego HTML

Question

mam sekcji div, że jestem dynamicznie podczas wypełniania przez jQuery AJAX:

$('#treeview').append(data.d); 

Jeżeli dane jest kilka zagnieżdżonych div o różnych identyfikatorach.

Mam też trochę kodu jQuery sprawia, że ​​DIV do katalogów, z +/- rozwinąć/zwinąć i dynamicznej populacji danych:

$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2! 
    $('div.tree div').click(function() { 
     var o = $(this); 
     o.children('div').toggle(); 
     o.filter('.parent').toggleClass('expanded'); 
     BindGridView($(this).attr('id')); 
     return false; 
    }); 

Problem jest kiedy wklej DIV do głównej katalogów div wszystko jest dobrze. Kiedy dynamicznie utworzę dokładnie ten sam tekst, tak, porównałem go, dynamiczna populacja danych nie działa; jednak widzę mój poprawny układ div na mojej stronie.

Zgaduję, że muszę dodać zdarzenie click & addClass kiedy robię

$ ('# TreeView') dołączyć (data.d.);

Ale nie mogę wymyślić, jak.

Answer 1

Jeśli dynamicznie dodajesz elementy do DOM, istniejące procedury obsługi zdarzeń powiązane z selektorem nie będą działać (na przykład click). Aby uzyskać zdarzenia z nowo utworzonych elementów DOM, należy użyć funkcji .

---

Należy zauważyć (as it was in the comments by Zach L), że od jQuery 1.7live została zastąpiona on. Ogólna rada jest taka sama (śledzenie dynamicznych elementów), zmienił się tylko mechanizm (on vs live).

Answer 2

Można użyć delegate() lub live() do wiązania programów obsługi zdarzeń z elementami dynamicznymi. W większości przypadków najskuteczniejszą trasą będzie delegate(), chyba że nie można przewidzieć, gdzie w modelu DOM będą występowały elementy dynamiczne.

Answer 3

live() jest przestarzałe.

Z docs:

Zastosowanie .on() dołączyć obsługi zdarzeń. Użytkownicy starszych wersji jQuery powinni używać .delegate() zamiast .live().

Answer 4

Tworzenie dynamicznych obiektów, które można było klikać, sprawiło, że przez jakiś czas byłem też leniwy. Nie mogłem uruchomić funkcji delegata(). końcu znalazłem ten przykład http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog

i modyfikować je

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { // zrobić przycisk akcji kliknij tutaj });

formResult jest id forma już na strona i formMessage to dynamicznie dodawana wiadomość wyświetlana po formularzu zostało przesłane. Skrypt dodaje przycisk na końcu formularza, aby usunąć komunikat.