Dynamically created checkbox click event selecting the whole row instead of only the check box in a jquery datatable. Why is that?
<p>I have added a new row in my jquery datatable with html content(checkbox input) on some event as:</p>

<pre><code>$("#btn").on( 'click', function (){
    $('#mytable').DataTable().row.add([data[0],data[1],"&lt;td&gt;&lt;input type=\"checkbox\" value=\"\" /&gt;&lt;/td&gt;"]).draw();
}
</code></pre>

<p>Now, when I click on the 'checkbox' from the dynamically created row, the whole row is getting triggered along with the checkbox. Hence, the below even is not getting triggered:</p>

<pre><code>$('input[type=checkbox]').on( 'click', function (e){
    e.stopPropagation();
});
</code></pre>

<p>But in turn triggers this event:</p>

<pre><code>$("#mytable tbody").on( 'click', 'tr', function (){
   $(this).addClass('selected').siblings().removeClass('selected');
 ....
}
</code></pre>

<p>Any idea why is this happening?</p>