How to exclude a sub-item from a parent's click event?

Question

I am having an issue where a table row has a click event, but when a user clicks a link in one of the table row's cells I do not want the row's click event to fire.

Imagine a case where a table cell has a link within it and normally clicking the empty areas of any of the table rows (e.g. not links) causes some action like an accordion/row collapse and expand.

What is occurring is that the click event below is firing then the link is followed (the intended action).

What I need to happen is to exclude clicking the a href's within a from triggering the tr.title-row click action (e.g. the alert should not fire and the link should be followed).

This jQuery code is setting up click events for the title row (e.g. all the TH's in that row, any cells, etc.)

$(document).ready(function() {
$(".report tr.title-row").click(function() {
    alert('I am firing!');
});

Here is the same HTML this applies to:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report">
  <tbody>
    <tr class="title-row">
      <th width="340"><span class="title">Test</span>
      </th>
      <th width="130" class="center-cell">Test</th>
      <th width="90" class="status"></th>
      <th></th>
      <th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a>
      </th>
    </tr>
    <tr>
      <td class="sub-row" colspan="5">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <td><strong>SubRow</strong>
              </td>
              <td width="90" class="status"><span class="sub">Sub</span>
              </td>
              <td width="120"></td>
              <td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

score 5 · Accepted Answer · answered Jan 06 '13 at 00:26

5

Can check the target of the row click and only run code if target isn't an <a> tag:

$(".report tr.title-row").click(function(event) {

    if( ! $(event.target).is('a') ){
        alert('I only fire when A not clicked!');
     }
});

answered Jan 06 '13 at 00:26

charlietfl

170,828
13
121
150

bukart · Answer 2 · 2013-01-06T00:28:49.870

2

just stop bubbling the event to the row

$(".report tr.title-row").click(function() {
    alert('I am firing!');
});

$(".report tr.title-row a").click(function(ev){
    // link clicked
    // so something

    ev.stopPropagation(); // stop triggering the event to the table row
});

btw... for better code just use on instead of the named eventhandler

$(".report tr.title-row").on( 'click', function() {
    alert('I am firing!');
});

$(".report tr.title-row a").( 'click', function(ev){
    // link clicked
    // so something

    ev.stopPropagation(); // stop triggering the event to the table row
});

edited Jan 06 '13 at 00:28

answered Jan 06 '13 at 00:22

bukart

4,906
2
21
40

1

There is not difference between `.on('click')` and `.click()` as far as this question is concerned. See [this](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click). – Blake Plumb Jan 06 '13 at 00:33
This is a bad code style, as someone reading the stopPropagation part will wonder, why it is there. – user2846569 May 16 '14 at 14:11

How to exclude a sub-item from a parent's click event?

2 Answers2