13

I am currently highlighting a table row when selected but in one of the cells I have a button. When I click the button I am triggering the table row click event. Is it possible to separate the two?

My two calls currently look like this:

$('table.table-striped tbody tr').on('click', function () {
   $(this).find('td').toggleClass('row_highlight_css');
}); 


$(".email-user").click(function(e) {
    e.preventDefault();
    alert("Button Clicked");
});

My HTML looks like this:

<table class="table table-bordered table-condensed table-striped">
  <thead>
    <tr>
      <th>col-1</th>
      <th>col-2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some Data</td>
      <td><button class="btn btn-mini btn-success email-user" id="email_123" type="button">Email User</button></td>
    </tr>
  </tbody>
</table>

Any idea how I might stop the button click event from triggering the row click event?

Pavel Chuchuva
  • 22,633
  • 10
  • 99
  • 115
user1216398
  • 1,890
  • 13
  • 32
  • 40

3 Answers3

19

You have to use stopPropagation: 

$(".email-user").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert("Button Clicked");
});

(See also : What's the difference between event.stopPropagation and event.preventDefault?)

Community
  • 1
  • 1
Samuel Caillerie
  • 8,259
  • 1
  • 27
  • 33
0

I believe this is caused by event bubbling, try using e.stopPropagation(); just after e.preventDefault();

IsisCode
  • 2,490
  • 18
  • 20
0

Try this:

$('.table-striped').find('tr').on('click', function() {
    $(this).find('td').toggleClass('row_highlight_css');
});

$(".email-user").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});​
palaѕн
  • 72,112
  • 17
  • 116
  • 136