title: jquery attached element disappears unintended after clicking
body: <p>As a jQuery newbie, I'm stumbling upon the following problem:</p>
  
  <p>I have a button that appends a fieldset to an existing form. Works fine. Each fieldset furthermore has a button that ultimately is intended to delete that exact field again. For testing purposes, I bound a simple console.log to clicking on any of those delete buttons. </p>
  
  <p>When I click on one of the delete buttons, the text is logged in the console. However, it only flashes for an instant before all previously appended fieldsets disappear completely from the document.</p>
  
  <p>Here's the html</p>
  
  <pre><code>&lt;form id="theform" class="form-inline"&gt;
      &lt;fieldset class="aField" id="field1"&gt;
          &lt;select id="products"&gt;
            &lt;option&gt;Item 1&lt;/option&gt;
            &lt;option&gt;Item 2&lt;/option&gt;
            &lt;option&gt;Item 3&lt;/option&gt;
          &lt;/select&gt;
        &lt;input type="text" placeholder="Amount" class="amount"&gt;
        &lt;input type="text" placeholder="Price"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;button id="addtoform" class="btn test"&gt;New Product&lt;/button&gt;
  </code></pre>
  
  <p>and here's the js:</p>
  
  <pre><code>$(document).ready(function () {
  
  $('#addtoform').click(function() {
      var fields = $('.aField').length;
      var newField  = 'field' + String(fields + 1);
      var button = "&lt;button class='btn btn-danger delete'&gt;delete&lt;/button&gt;";
      var newElem = $('#field1').clone().attr('id', newField).append(button); 
  
      $('#theform').append(newElem);
  });
  
  $("#theform").on("click", '.btn.btn-danger.delete', function () {
      console.log('ok, let me delete this.');
  });
  </code></pre>
  
  <p>});</p>
  
  <p>What is happening?</p>