title: jquery .on() doesn't work for cloned element
body: <p>It seems <code>.on()</code> failed to bind newly created element from <code>clone()</code></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="add"&gt;add&lt;/div&gt;
  &lt;/div&gt;
  
  
  $(".remove").on("click",function() {
      $(this).remove();
  });
  
  $(".add").on("click", function() {
   $(this).clone().toggleClass("add remove").text("remove").appendTo($(".container"));
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/cokdchbq/4/" rel="nofollow">jsfiddle</a></p>
  
  <p>Why this doesn't work?</p>
  
  <p><strong>Update:</strong>
  please note that, I know <code>.clone()</code> takes two parameters, but I don't want to let the cloned element continue registered to the old events, but a new one, I could use <code>.off()</code> and <code>.on()</code> to register again, but my question is why the previously declared <code>.on(".remvove")</code> didn't capture the change in the cloned element.</p>