貼り付けたHTMLでJqueryのクリック機能が機能しない

Question

liの子HTMLをdiv.rowに追加しようとしています。最初の関数は正常に動作していますが、2回目は機能しませんが、私はjqueryセレクタに同じクラスを使用しています。

jquery delegate()が見つかりました。また、jquery on('click','',function(){...});でも試してみましたが、両方とも追加機能が動作していません。

\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>

誰がどのように私はjqueryのが付加HTMLにjqueryのを実装することができ、私を導くことができる、私は感謝したいと思います。ありがとうございました。

Answer 1

デリゲート（）関数は（（）今、好ましいことを上の注意、しかし、ボンネットの下に（）​​デリゲートとまったく同じことをして）大丈夫です

あなたの問題は、あなたのセレクタやhtmlです。元のアイテムは ".list-group"の中にありますが、追加されたアイテムはそうではありません。

EDIT：.htmlは、ul要素の内部htmlのみをコピーするため、上記の問題があります。実際のulを複製するには、それらをラップし、ラッピング要素の.htmlを取得します。これはうまくいくようです：（クローン（）を使用することもできます）

$('.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>');