jQuery onclick feuert nicht auf dynamisch eingefügte HTML-Elemente?

Question

Mein Onclick-Ereignis funktioniert. Wenn dieses onclick -Ereignis jedoch in dynamischem HTML ist, funktioniert es nicht mehr. Wie in: nichts passiert.

$(document).ready(function() { 
    $("#guestlist .viewguestdetails").click(function() {   
     $(".guestdetails[data-id='18']").toggle(); 
    }); 
}); 

ich dann HTML zu einer Seite dynamisch hinzugefügt:

<div id="guestlist">  
    <span class="completeguestdetails" data-id="18">(add your data)</span> 
     <div class="guestdetails" data-id="18" style="display: none;"> 
      some data 
     </div> 
</div> 

aber wenn ich auf, dann „(Ihre Daten addieren)“ nichts passiert. Wenn ich den HTML-Code statisch auf meiner Seite habe, funktioniert das Umschalten des Divisors 'guestdetails'. Es scheint, dass kein Ereignis mit dynamisch eingefügtem HTML verknüpft ist.

UPDATE:

Die neue dynamische HTML-I i eine Zeile in einer vorhandenen Tabelle bin einfügen. Die anderen Reihen haben bereits Veranstaltungen zu den Onclick Ereignisse gebunden, wie:

$("span.guestattendance").click(function() { 
    if ($(this).hasClass('checkbox-on')) { 
     $(this).removeClass('checkbox-on').addClass('checkbox-off'); 
     $("#guestday").removeClass('checkbox-on').addClass('checkbox-off'); 
    } 
    else { 
     $(this).removeClass('checkbox-off').addClass('checkbox-on');    
     if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') && 
     $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) { 
      $("#guestday").removeClass('checkbox-off').addClass('checkbox-on'); 
     } 
    } 
}); 

Da kann ein Benutzer mehr als 1 Zeile einzufügen, ich nicht die ID verwendet haben, sondern ein Wrapper um das Element hinzugefügt Ich bin Einfügen:

und dann in ready() Funktion:

$('.newrow_wrapper').on('click', 'span', function() { 
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle(); 
}); 

Das erste Problem ist jedoch, dass offenbar, wenn ich ein div wickeln um eine tr-Tag, alle t r und td Tags werden aus dem eingefügten HTML entfernt! Auch wenn ich auf den Bereich klicke, um die Gastdetails anzuzeigen, passiert nichts.

Answer 1

tun:

$('#wrapper').on('click', 'a', function() { ... }); 

wo #wrapper ein statisches Element, in dem Sie die dynamischen Links hinzufügen.

So haben Sie einen Wrapper, der in den HTML-Quellcode codiert hart ist:

<div id="wrapper"></div> 

und Sie es mit dynamischen Inhalten füllen. Die Idee besteht darin, die Ereignisse an diesen Wrapper zu delegieren, anstatt Handler direkt an die dynamischen Elemente zu binden. elements.Here ist der Link zur Dokumentation http://api.jquery.com/on/

etwas schreiben wie diese

 $('#someid').on('click', function() { ... }); 

oder so etwas wie dieses

Answer 2

Verwenden .on() Ereignishandler zu befestigen, die dynamisch die HTML bindet.

  $(document).on('click', 'tag_name', function() { ... }); 

Answer 3

jQuery.on() wird verwendet, auf dynamisch eingefügt HTML-Elemente jedes Ereignis zu binden. Verwenden Sie es wie folgt:

$(document).ready(function() { 
    $(document).on('click',"#guestlist .viewguestdetails",function() {   
     $(".guestdetails[data-id='18']").toggle(); 
    }); 
});