title: Why does my jQuery delegated click fire multiple times?
body: <p>I am copying an element and adding it to a a list of elements. First, I get some HTML using an ajax call:</p>
  <pre><code>var setButtonClick = function (url, btn) {
      $.ajax(url, $('form').serialize(), 'Html').then(function (data) {
          $(btn).parent().find(sel.addListItem).on('click', function () {
              addListItem(data, this, btn);              
          });
  
          addListItem(data, btn, btn);          
      });
  }
  </code></pre>
  <p><code>addListItem</code> looks like this:</p>
  <pre><code>var addListItem = function (data, context, btn) {
      
      var $template = $(data);
      // stuff not related removed for brevity
            
      $(btn).before($template);      
  }
  </code></pre>
  <p>I then have a remove function using a delegate:</p>
  <pre><code> $(sel.editableList).delegate(sel.removeListItem, 'click', function () {
       // fires once for every element with the sel.removeListItem selector
   }
  </code></pre>
  <p>I need the click event to fire once for the clicked element only.  I can get a basic version of <code>delegate</code> working by inserting content like this:</p>
  <pre><code>$( &quot;body&quot; ).delegate( &quot;p&quot;, &quot;click&quot;, function() {
      $( this ).after( &quot;&lt;p&gt;Another paragraph!&lt;/p&gt;&quot; );
  });
  </code></pre>
  <p>Therefore, I'm thinking it may be because I'm inserting a copy of the element or is it the same element I'm adding over and over?  I've also tried to use <code>clone</code> to create a new element before inserting like:</p>
  <pre><code> var $template = $(data).clone();
  </code></pre>
  <p>Can anyone show me where I am going wrong with this please?</p>