jQueryを使用してクローンを作成したときにボタンが機能しない

Question

ボタンで問題が発生しました。だから、あるリストから別のリストにアイテムを複製したい。私はまた、他のリストに渡されたときにボタンを追加したい。ボタンをクリックすると問題が表示されます。何も起こりません。アイテムは削除されません。なぜそれが起こっているのか考えていますか？

のjQuery：

$(function() { 
    $("#sortable1").sortable({ 
     connectWith: ".connectedSortable", 
     items: "li:not(.ui-state-disabled)", 
     remove: function(event, ui) { 
      ui.item.clone().append("<button class='cancelBut'>Cancel</button>").appendTo('#sortable13'); 
      $(this).sortable('cancel'); 
     } 
    }).disableSelection(); 

    $("#sortable13").sortable({ 
     connectWith: ".connectedSortable", 
     items: "li:not(.ui-state-disabled)" 
    }).disableSelection(); 

     $(".cancelBut").click(function() { 
     //$(this).parent().remove(); 
     alert("It works"); 
    }); 
    }); 

HTML：

<div id="items" style="display: none"> 
    <ul id="sortable1" class="connectedSortable"> 
     <li class="ui-state-default ui-state-disabled">Items</li> 
     <li class="ui-state-default"><p>Item 1</p></li> 
    </ul> 
</div> 

<ul id="sortable13" class="connectedSortable"> 
    <li class="ui-state-default ui-state-disabled">Drag Here</li> 
</ul> 

イム答えは明白である場合にとても残念にjQueryに新しく、助けてくれてありがとう:)

Answer 1

使用イベント委任。

$('.body').on('click', '.cancelBut', function() { 

}); 

イベントハンドルが唯一DOMあなたはクリックイベントが定義されている方法に存在している要素にアタッチされています。

あなたのケースでは、ハンドラがバインドされていない正確なシナリオを実行しています。 イベントデリゲーションを使用すると、イベントはclickがバインドされている要素（この場合はbody）にバブルし、クローンされた要素のクリックを呼び出します。