Powiązanie zdarzeń z dynamicznie dodanymi elementami

Question

Próbuję powiązać funkcje z nowo dodanymi elementami za pomocą jquery ... Próbowałem już wielu przykładów w Internecie, ale jakoś nic nie działa dla mnie. Stworzyłem formularz z identyfikatorem i przyciskiem, po przesłaniu ajax ładuje elementy z innej strony i wstawia html na aktualną stronę. Wydaje się, że wszystko działa dobrze, ale nowo załadowane elementy nie zawierają żadnych zdarzeń. Oto html:

<form id="tclick" method="post" action="${tg.url('/entryCmd')}"> 
    <input type="hidden" name="id" value="${entries[0].id}" /> 
    <input type="submit" value="submit"/> 
</form> 

i jQuery:

$("#tclick").on("submit", function(data){ 
    var h = $(this).serialize(); 
    var d; 

    $.get($(this).attr("action"), h, 
     function(returnData) { 
      d = returnData; 
     } 
    ); 

    $(this).ajaxStop(function(){ 
     $(this).after($(d).find(".edit-content").html()); 
    }); 

    return false; 
}); 

Div edit-content jest ładowany bezpośrednio po elementu formularza. Ma pewne elementy, które powinny być związane z funkcjami jQuery.

Answer 1

Aby dodać zdarzenia do elementów, które są dodawane do DOM po załadowaniu strony, należy użyć albo delegate(), albo jeśli używasz jQuery 1.7+ on().

$(".edit-content").delegate("#myDiv", "click", function() { 
    // do stuff when #myDiv gets clicked. 
}); 

API:
Delegate
On

Answer 2

Got zasadzie dwie opcje, aby to zrobić:

1. Bind wydarzeń po dodanie nowego HTML:

   $(this).ajaxStop(function(){ 
       $(this).after($(d).find(".edit-content").html()); 
       // do you binding here 
   }); 
   

2. Użyj delegacji zdarzeń (z .on() lub .delegate()).

   $('.some-container').on('click', '.edit-button', function(e) {...}); 
   

   To będzie przekazywać zdarzenie click do elementu .some-kontenera za ewentualne dzieci z klasy .edit przycisku, nie ma znaczenia to ona była już w DOM załadowane lub później.