title: Function doesn't work after object is drag and dropped
body: <p>I created this drag and drop list maker using jQuery. The red X is supposed to remove the item on click by fading out the parent div. It works when the element is sitting in the grey box on the right, but after it's dropped, the delete function doesn't work anymore. How do I make this work for items that have been moved to the boxes on the left? Thanks.</p>
  
  <pre><code>$(document).ready(function(){    
  $('.draggable').draggable({
  revert: "invalid",
  stack: ".draggable",
  helper: 'clone'
  })
  $('.droppable').droppable({
  accept: ".draggable",
  drop: function (event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      // Move draggable into droppable
      draggable.clone().appendTo(droppable);
      //draggable.css({top: '5px', left: '5px'});
  }
  })
  
    $("a").click(function(event) {
    event.preventDefault();
    $(this).closest('div').fadeOut();
  })
  });    
  </code></pre>
  
  <p><a href="https://jsfiddle.net/te4Lqg3f/" rel="nofollow noreferrer">https://jsfiddle.net/te4Lqg3f/</a></p>