Button in table fires both button and table event when clicked

Question

I have a table that displays info on certain components and at the right side of the table, I have a delete button. As of now, I have it so when clicking on a component's row it brings you to a new page. Since my delete button is also on that row, it brings me to that page when clicked instead of deleting the component. Is there a way to make only the button event fire when clicked instead of the table's row event? Here's what my HTML looks like:

{{#components}}
<tr class="component" data-id={{id}} data-type={{type}}>
        <td>{{general_name}}</td>
        <td>{{type}}</td>
        <td>
            <button class="btn btn-danger btn-xs glyphicon glyphicon-remove pull-right delete" id="remove" data-id={{id}} data-type={{type}}></button>
        </td>   
    </tr>
{{/components}}

And here's the javascript events I have that should route the clicks to the right spot:

'click #remove' : 'deleteComponent',
'click .component': 'openComponent',

I have tried using jQuery's removeClass("component") on my button but that doesn't seem to work. Any ideas?

Answer 1

You can stop event propagation when the button is clicked using something like this:

$('button').click(function(event) {
  event.stopPropagation();
  //set up your normal button code here...
});