title: jQuery on click event firing multiple times
body: <p>I just learned how to use the method <a href="http://api.jquery.com/on/" rel="nofollow">.on()</a> and I use it to add an event handler to some buttons that are added "live" (after the DOM is ready). </p>
  
  <pre><code>$('#table').on("click", ".delete", function() {
      //whatever
  });
  </code></pre>
  
  <p>This seems to work fine but when I use it in my code I get the click event fired twice. It fires as many times as I have changed the selector, that is, I click a name in the selector and then another and another, let's say 3 times, then when clicking the mentioned button I will get an alert with all those 3 names instead of only the one is selected at that time.</p>
  
  <p>I haven't been able to replicate it in a JsFiddle as the whole thing is quite big. So let me know what else I can add to make the question better.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code> $('#dataSelector').change(function() {
     #more code
      $('#table').on("click", ".delete", function() {
          var data_name = $("#dataSelector option:selected").attr('name');
          alert(data_name);
      });
    });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="selectData"&gt;
      &lt;label&gt;Select:&lt;/label&gt;
      &lt;br&gt;
      &lt;div class=""&gt;
  
          &lt;select id="dataSelector" class="form-control"&gt;
  
              &lt;option id="default" selected="true" name="default"&gt;Pick&lt;/option&gt;
  
              &lt;option value="1" name="somethingA"&gt;somethingA&lt;/option&gt;
  
              &lt;option value="2" name="somethingB"&gt;somethingB&lt;/option&gt;
  
              &lt;option value="3" name="somethingC"&gt;somethingC&lt;/option&gt;
  
          &lt;/select&gt;
  
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="goal_table" class="col-md-12"&gt;
  
      &lt;table id="table" class="table table-bordered"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name1&lt;/th&gt;
                  &lt;th&gt;Name2&lt;/th&gt;
                  &lt;th&gt;Name3&lt;/th&gt;
                  &lt;th&gt;name4&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr id="13"&gt;
                  &lt;td&gt;somethingA&lt;/td&gt;
                  &lt;td&gt;value&lt;/td&gt;
                  &lt;td&gt;whatever&lt;/td&gt;
                  &lt;td&gt;∞&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button name="13" type="button" class="btn btn-default delete"&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>