Different two events row click and button click ?

headshot9x

Hello guys.I have a datatable (using datatable 1.7), i define a column with button

{
      "mData": null,
       "aTargets": [-1],
       "defaultContent": '<button type="button" id="btclick" class="btn btn-info btn-xs">Click</button>'
                    }

Ok, i want to process two event and different between row click and click button in datatable cell, I test as follow:

  $('#table tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
            console.log("Not Selected row");
                }
                else {
                    $(this).addClass('selected');
                    console.log("Selected row");
                }
            });


            $('#table tbody').on('click', 'button', function (e) {
                e.preventDefault();
        console.log("Event button click");
            });

When i click row , event row click is working, add class "selected" or remove class "selected" , but when i click button in table , something mistake or wrong in here , the row with button is click changed css "selected". What's going on in here ?
Can you tell me ?
Thank you so much

allan

I think you want to call e.stopPropagation() to stop the event bubbling up the DOM.

Allan