Jquery Klick-Funktion funktioniert nicht bei aufgerufenen HTML

Question

Ich versuche, Kind HTML von li in div.row anhängen. Die erste Zeitfunktion funktioniert ordnungsgemäß, aber beim zweiten Mal funktioniert es nicht, aber ich benutze die gleichen Klassen für jquery selector.

Ich suchte darüber und fand jquery delegate(), ich habe auch mit ihm und jquery on('click','',function(){...}); versucht, aber beide arbeiten nicht mit angehängter Funktion.

\t \t $("body").delegate(".list-group li a", "click", function(event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t if ($(this).parent().children('ul').length > 0) { 
 
\t \t \t \t \t $('.append-level').append(
 
\t \t \t \t \t \t '<div class="col-md-3 col-xs-12 col-sm-6">'+ 
 
\t \t \t \t \t \t \t '<h2>Child List Group</h2>'+ 
 
\t \t \t \t \t \t \t $(this).parent().children('ul').html()+ 
 
\t \t \t \t \t \t '</div>'); 
 
\t \t \t } 
 
\t \t });

.hide-child{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t \t <div class="row append-level"> 
 
\t \t \t <div class="col-md-3 col-xs-12 col-sm-6"> 
 
\t \t \t \t \t <h2>Parent List Group</h2> 
 
\t \t \t \t \t <ul class="list-group" id="level-one"> 
 
\t \t \t \t \t \t <li class="list-group-item"><a href="#">First item</a></li> 
 
\t \t \t \t \t \t <li class="list-group-item"><a href="#">Second item</a></li> 
 
\t \t \t \t \t \t <li class="list-group-item"><a href="#">Third item</a> 
 
\t \t \t \t \t \t \t \t <ul class="list-group hide-child"> 
 
\t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">First item</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">Second item</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">Four Third item</a> 
 
\t \t \t \t \t \t \t \t \t \t <ul class="list-group hide-child"> 
 
\t \t \t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">First item</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">Second item</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t <li class="list-group-item"><a href="#">Third item</a></li> 
 
\t \t \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Kann mir jemand führen, wie ich jquery auf beigefügten html von jquery implementieren kann, würde ich schätzen mögen. Danke.

Answer 1

Ihre Stellvertretung() Funktion ist in Ordnung (beachten Sie, dass() wird nun bevorzugt, aber tut genau das Gleiche wie delegieren() unter der Haube)

Ihr Problem Ihr Wähler oder html ist. Ihre ursprünglichen Elemente befinden sich in ".list-group", aber Ihre angehängten Elemente sind nicht vorhanden, so dass die Auswahl sie nicht findet.

EDIT: Das oben genannte Problem ist aufgetreten, weil .html nur die innere html der UL-Elemente kopiert. Um die tatsächlichen uls zu klonen, wickeln Sie sie ein und nehmen dann die .html des umhüllenden Elements. Das scheint zu funktionieren: (Sie könnten auch .clone())

$('.append-level').append(
         '<div class="col-md-3 col-xs-12 col-sm-6">'+ 
          '<h2>Child List Group</h2>'+ 
          $(this).parent().children('ul').wrap('<div/>').html()+ 
         '</div>');