Prevent table row onclick event to fire when clicking button inside the row

If you use jQuery, you can just do this instead:

tbody.on('click', 'tr', function (e) {
    let target = $(e.target);
    if (target.is('i') || target.is('button') || target.is('a') || target.hasClass('select-checkbox')) {
        return;
    }
    //your stuff here
});

Add an event.stopPropagation(); to your buttons click handler. For more information, have a look here.


If you dislike the javascript solution, in many cases a CSS solution is possible as well:

style="pointer-events: none;"

That will supress the <tr> onclick event.

However, in some cases I still had issues where it didn't seem to work. In the majority of cases I just use the style above.