jQuery Table Row Click Event also firing when i click a link

Question

Here is what i have so far, getting the row number is working great but i need to make it so that when i click on the link in the table, it doesnt fire the code inside the function.

<table>
  <tr class="row">
    <td>A</td>
    <td><a class="link" href="foo.html">Foo</a></td>
  </tr>
  <tr class="row">
    <td>B</td>
    <td><a class="link" href="Bar.html">Bar</a></td>
  </tr>
</table>


<script>
$(function(){
    $('.row:not(.link)').click(function(){
        var $row = $(this).index();
    });
});
</script>

Your better off checking if the target is the same as what you have clicked. That covers all checkboxes/all children/future proof. http://stackoverflow.com/a/6411507/560287 — John Magnolia, May 21 '14 at 15:21

score 47 · Accepted Answer · answered Jun 13 '11 at 13:06

The selector .row:not(.link) will select all elements that have a class "row" and don't have the class "link", which is not what you are looking for.

You need to use event.stopPropagation within the click event of the a.link elements so that the click event is not propagated to the parents, which includes row.

Try this:

<table>
    <tr class="row">
        <td>A</td>
        <td><a class="link" href="foo.html">Foo</a></td>
    </tr>
    <tr class="row">
        <td>B</td>
        <td><a class="link" href="Bar.html">Bar</a></td>
    </tr>
</table>

<script> 
    $(function(){     
        $('.row').click(function(){         
            var $row = $(this).index();     
        }); 
        $('.row .link').click(function(e){
            e.stopPropagation(); 
        });
    }); 
</script>

-1 because the selector he's written although not overly efficient will actually work, contrary to your comment. — Nathan, Jun 13 '11 at 13:17
@Nathan: I never mentioned that the selector will not work(rather the selector is not the issue here). I was trying to highlight that that selector is not needed and infact :not(.link) is useless in this context. — Chandu, Jun 13 '11 at 13:19

ermushko · Answer 2 · 2015-09-17T11:14:07.487

Just a bit late, but this is first link in Google I opened in search for solution to relative topic. So, it may become useful for someone:

$(".clickableRow").click(function(e) {
  if (e.target.nodeName != "A") {
    window.document.location = $(this).attr("href");
  }
});

Links in a row, I mean standart , will work as usual, and this example markup will have three independent link activations:

<tr class="clickablerow" href="profile.html">

  <td>John Doe, the VP</td>
  <td><a href="print.html" target="_blank">Print</a><a href="chat.html" target="_blank">Chat</a></td>
    
</tr>

score 5 · Answer 3 · answered Jun 30 '12 at 09:13

5

Heres a quick fix in jquery, just use instanceof

  $("#news-table tr").click(function(e){
      if((e.srcElement instanceof HTMLAnchorElement)!=true  )console.log("IIIIIIHA HA!");
  });

answered Jun 30 '12 at 09:13

Jacek Głodek

2,374
1
14
8

Nathan · Answer 4 · 2011-06-13T13:12:19.770

2

You need to prevent event propagation in the click event of the links - here's a sample: http://jsfiddle.net/6t8u7/1/

As you can see, clicking on the link just fires one event. Clicking on the row fires the other event.

The reason you're getting the current behaviour is that the click event from the link "bubbles up" to the parent element.

edited Jun 13 '11 at 13:12

answered Jun 13 '11 at 13:07

Nathan

6,095
2
35
61

rybo111 · Answer 5 · 2016-08-18T11:14:23.823

With a data attribute, there's no need for a class:

$(document).on('click', '[data-href]', function(e) {
    if($(e.target).hasClass('ignore'))
        return;
    var ignore = ['input', 'a', 'button', 'textarea', 'label'];
    var clicked = e.target.nodeName.toLowerCase();
    if($.inArray(clicked, ignore) > -1)
        return;
    window.location = $(this).data('href');
});

Usage example (tr is just an example - you can use div, etc):

<tr data-href="your_url">
    <td class="ignore">Go nowhere</td>
    <td>Go to your_url</td>
    <td><a href="another_url">Go to another_url</a></td>
    <td><input type="text" value="Go nowhere"></td>
</tr>

score 0 · Answer 6 · edited Nov 08 '16 at 12:32

0

You can also use this without explicitly selecting the row in the second function.

$(function(){     
    $('.row').click(function(){         
        var $row = $(this).index();     
    }); 
    $('.link').click(function(event){
       event.preventDefault();
       event.stopPropagation();
    });
});

edited Nov 08 '16 at 12:32

Matthew Strawbridge

19,940
10
72
93

answered Nov 08 '16 at 12:11

john

33
1
3

Kroksys · Answer 7 · 2017-11-27T13:36:42.977

0

Just add: if (e.target.tagName == 'A') return; to row click and Link element will use its own logic.

Here is more detailed example:

$("#table tr").click(function(e) {

    // Skip if clicked on <a> element
    if (e.target.tagName == 'A') return;

    // Logic for tr click ...

});

edited Nov 27 '17 at 13:36

answered Nov 27 '17 at 13:24

Kroksys

759
10
15

score 0 · Answer 8 · answered Jul 23 '20 at 17:43

Also can be usable (especially if you use href with span or other nested items in href):

    $(".row").click(function(e) {
        var hasHref = $(e.target).closest('td').find('a').length;

        if (! hasHref) {
            window.document.location = $(this).data("href");
        }
    });

jQuery Table Row Click Event also firing when i click a link

8 Answers8