title: Button does not work when cloned using jQuery
body: <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>