Button does not work when cloned using jQuery : <p>I have problem here with a button. So I want to clone items from one list to another one. I also want to add a button when passed to the other list. The problem appears when I click the button. Nothing happens. Item does not get removed. Do you have any idea why that's happening?</p>

<p><strong>jQuery:</strong></p>

<pre><code>    $( function() {
    $( "#sortable1").sortable({
        connectWith: ".connectedSortable",
        items: "li:not(.ui-state-disabled)",
        remove: function(event, ui) {
            ui.item.clone().append( "&lt;button class='cancelBut'&gt;Cancel&lt;/button&gt;" ).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");
    });
    });
</code></pre>

<p><strong>HTML:</strong></p>

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

&lt;ul id="sortable13" class="connectedSortable"&gt;
    &lt;li class="ui-state-default ui-state-disabled"&gt;Drag Here&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Im new to jQuery so sorry if the answer is obvious and thanks for help :)</p>
