Datatable on click event triggered double events which both button and row

dragon82

Hello People,

I have some difficulties separating row and button event because the button was a child under row

Live Datatable link: http://live.datatables.net/madadak/15/edit

Javascript:

$(document).ready( function () {
  
  var table = $("#example").DataTable();
  
  $("#example tbody").on("click", "button.editButton", function() {
      alert("Edit Button");
  });                      
  
  $("#example tbody").on("click", "tr", function() {
      alert("Row");
  });  
  
} );

whenever I click on the "edit" button, it will also trigger the row event as well.

I hope someone point me to a correct direction on how to separate this 2 events without overlapping each other.

Thanks

:)

dragon82

Found the answer:

http://css-tricks.com/dangers-stopping-event-propagation/