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. stackoverflow.com/a/6411507/560287 — John Magnolia
– John Magnolia, Commented May 21, 2014 at 15:21

Chandu · Accepted Answer · 2011-06-13 13:06:38Z

47

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>

answered Jun 13, 2011 at 13:06

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Over a year ago

-1 because the selector he's written although not overly efficient will actually work, contrary to your comment.

Chandu Over a year ago

@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.

ermushko · Accepted Answer · 2015-09-17 11:14:07Z

6

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>

edited Sep 17, 2015 at 11:14

answered Aug 25, 2015 at 9:06

ermushko

611 silver badge3 bronze badges

Comments

Jacek Głodek · Accepted Answer · 2012-06-30 09:13:28Z

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, 2012 at 9:13

Jacek Głodek

2,4341 gold badge15 silver badges8 bronze badges

Comments

Nathan · Accepted Answer · 2011-06-13 13:12:19Z

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, 2011 at 13:12

answered Jun 13, 2011 at 13:07

Nathan

6,2244 gold badges38 silver badges66 bronze badges

Comments

rybo111 · Accepted Answer · 2016-08-18 11:14:23Z

1

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>

edited Aug 18, 2016 at 11:14

answered Aug 15, 2016 at 8:47

rybo111

12.6k4 gold badges65 silver badges74 bronze badges

Comments

Matthew Strawbridge · Accepted Answer · 2016-11-08 12:32:18Z

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 8, 2016 at 12:32

Matthew Strawbridge

20.8k10 gold badges82 silver badges97 bronze badges

answered Nov 8, 2016 at 12:11

john

331 silver badge3 bronze badges

Comments

Kroksys · Accepted Answer · 2017-11-27 13:36:42Z

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, 2017 at 13:36

answered Nov 27, 2017 at 13:24

Kroksys

1,01113 silver badges18 bronze badges

Comments

Manic Depression · Accepted Answer · 2020-07-23 17:43:09Z

0

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");
        }
    });

answered Jul 23, 2020 at 17:43

Manic Depression

1,0384 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related