title: jquery click event not working for dynamic fields
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements">jQuery - Click event doesn’t work on dynamically generated elements</a>  </p>
  </blockquote>
  
  
  
  <p>I just have a clickable add button that adds new table rows. The table rows include a delete button. I've noticed that when I dynamically add a new row the button does not fire the click event, but if the button exists when the page loads, then it works fine. How can I correct this?</p>
  
  <p>Javascript:</p>
  
  <pre><code>$('#btnAdd').click(function () {
  
          var newTr = '&lt;tr&gt;&lt;td&gt;&lt;input id="column_0" name="column[0]" style="width:40%;" type="text" /&gt; &lt;img alt="Delete-icon24x24" class="btnDel clickable" id="" src="/assets/delete-icon24x24.png" /&gt;&lt;/td&gt;&lt;/tr&gt;';
          $('#columns').append(newTr);
      });
  
  $('.btnDel').click(function () {
      alert('hey');
      console.log('test');
      var row = $(this).closest("tr");
      alert(row);
  
      row.remove();
  });
  </code></pre>