How to suppress Click event on when clicking on the button on the ?

Question

I have a click event on the table row that executes an action. However when I click on the button on the same row, I would like to prevent the on-row-click event and simply

Answer 1

You can just add a return false; in the click

$(this).find(".my_btn").off('click').on('click', function () {
  alert("clicked");
  return false;
})

http://jsfiddle.net/VhYdD/4/

Answer 2

use this to stop the propagation event

       event.stopPropagation();

see here link

Answer 3

You should remove the click behavior from the TR that that button resides. You can use a jQuery method like $(this).closest('tr') we can search up from the button through the DOM to find the TR, alternatively you could find the parent using parent functions in jQuery. Once we find the element (TR) we are looking for we can unbind the click function from it.

So your final call would look like this:

$(this).closest('tr').unbind('click');

I've inserted this into your code and it works as expected, removing the click event from the TR

$(document).ready(function() {
    $('#tab_open_deals tbody tr').on('click', function() {
        var row = $('<tr/>');
        row.load('/echo/html/', {
        html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
    });
  $(this).find(".my_btn").on('click', function(){
       $(this).closest('tr').unbind('click');
       alert("clicked") })
       $(this).find(".my_btn").show();
       row.insertAfter($(this));
    });
});

I hope this works well for you.