title: What is the best way to
body: <p>I have a list of items in a to-do list. Each time the user clicks on a checkmark, it gets added to a "completed" items list. Besides adding it to the list, I want a pop up notification to appear right after the checkmark is clicked on. I want to do this using .dialog from jqueryUI</p>
  
  <p>This is the code that adds the item to the "completed" list:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#todo-list').on('click','.done',function(e) {
      var $taskItem = $(this).parent("li");
      var $copy = $taskItem.clone();
      $('#completed-list').prepend($copy);
      $copy.hide().slideDown(); 
      $taskItem.remove();
    }
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried adding a nested function, but it doesn't work. Any ideas on how to add this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#todo-list').on('click','.done',function(e) {
      var $taskItem = $(this).parent("li");
      var $copy = $taskItem.clone();
      $(".done").dialog({
        autoOpen:false,
        show:{
          effect: "blind",
          duration: 9000
        },
        hide: {
          effect: "explode",
          duration: 9000
        }
      }
  );</code></pre>
  </div>
  </div>
  </p>