Question

問題があります。まず、このコードを使って新しい要素を生成することができます。このコードはうまくいきます。

$(document).ready(
    function() { 
     $(".addto").click(function() { 
     var text = $(this).children(".textlink").text(); 
     html = '<li class="ui-state-default"><a href="#" class="delete"><i class="fa fa-trash" aria-hidden="true"></i></a> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + text + '</li>'; 
     $("#sortable").append(html); 
     }); 
}); 

このコードは、「#sortable」というdivに付加されたhtmlを生成します。それはうまく動作します。しかし、次のステップではありません：このコードはゴミ箱アイコンを持っています。そのアイコンをクリックすると、その要素を削除できます。このコードを普通のHTMLで書いても動作しますが、jQueryで生成されたHTMLについてはうまくいきません。これは、私が要素を削除するために使用しているコードです。

$(document).ready(
    function() { 
     $(".delete").click(function() { 
     $(this).parent().remove(); 
     }); 
}); 

おかげ

Answer 1

それも、まだ存在しない要素をキャッチので、私は、ドキュメントにリスナーを追加します。

$(document).on('click', '.delete', function(e){ 
$(this).parent().remove(); 
}) 

Answer 2

イベントハンドラを割り当てるときは、バインドする要素がありません。後でそれらを追加しています。

イベントをコンテナ要素にバインドし、遅延イベントを使用する必要があります。

$('#container').on('click', '.delete', function() { 
    // do delete stuff here 
});