title: Fire an event for a dynamically created control
body: <p>I am trying to make an alert box show the name of the control that triggered an event. In this case, I have a button at the bottom of my page (i_am_the_buttons_name) then when I click it, I want it to show an alert that says its name. This works fine. The problem is, after I click the "Plus" button to add a row of textboxes/a button and try to click the dynamically created button, nothing happens. I've attached a picture that shows this. I hope this makes sense.<a href="https://i.stack.imgur.com/zNTwV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zNTwV.png" alt="enter image description here"></a></p>
  
  <p>jQuery:</p>
  
  <pre><code>&lt;script&gt;
          $(window).load(function(){
              $(document).ready(function () {
  
                  var counter = 1;
  
                  $("#removeButtonByID").click(function () {
                      alert(this.name);
                  });
  
                  $("#addButton").click(function () {
                      $('&lt;div/&gt;',{'id':'TextBoxDiv' + counter}).html(
                        $('&lt;label/&gt;').html( 'Line #' + counter + ' :  ' )
                      )
  
                      .append($('&lt;input type="text" placeholder="Item Name"&gt;').attr({ 'id': 'textbox' + counter, 'name': 'txtItemName' + counter }))
                      .append($('&lt;button type="button" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;&lt;/button&gt;').attr({ 'name': 'btnRemove' + counter, 'id': 'removeButtonByID' }))
                      .append($('&lt;br /&gt;'))
                      .appendTo('#TextBoxesGroup')
  
                      counter++;
                  });
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;hr /&gt;
  &lt;div id='TextBoxesGroup'&gt;
      &lt;!-- Dynamically added textboxes here --&gt;
  &lt;/div&gt;
  &lt;hr /&gt;
  &lt;button type="button" class="btn btn-default" id='addButton'&gt;
      &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-default" name="i_am_the_buttons_name" id='removeButtonByID'&gt;
      &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>