Add new row to DataTable with td that has buttons
<p>I can dynamically add a row to DataTable via <code>fnAddData</code>. Upon adding a new row, a <code>td</code> with an edit button that has a <code>btn-edit</code>. I intend to use <code>btn-edit</code> as a selector but I was unable to call it upon click.</p>

<p>HTML</p>

<pre><code>&lt;button id="add-row"&gt;Add Row&lt;/button&gt;

&lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;Name&lt;/th&gt;
   &lt;th&gt;Position&lt;/th&gt;
   &lt;th&gt;Action&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Tiger Nixon&lt;/td&gt;
   &lt;td&gt;System Architect&lt;/td&gt;
   &lt;td&gt;&lt;button class='btn-edit' btn-id='1'&gt;Edit&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Garrett Winters&lt;/td&gt;
   &lt;td&gt;Accountant&lt;/td&gt;
   &lt;td&gt;&lt;button class='btn-edit' btn-id='2'&gt;Edit&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$(document).ready(function() {
 $('#example').DataTable();

 var obj = {3: {'name':'Rose','position': 'VP'}, 4: {'name':'Jack','position': 'Captain'}};

 var count = 3;
 $('#add-row').on('click',function() {
  $('#example').dataTable().fnAddData( [
   obj[count].name,
   obj[count].position,
   "&lt;button class='btn-edit' btn-id='"+count+"'&gt;Edit&lt;/button&gt;" 
  ]).draw();
  count++;
 });

 $('.btn-edit').click(function() {
  alert($(this).attr('btn-id'));
 });
});
</code></pre>

<blockquote>
  <p><a href="https://jsfiddle.net/33Lbayx3/2/" rel="nofollow">https://jsfiddle.net/33Lbayx3/2/</a></p>
</blockquote>