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>

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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>

Answer 6

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

Answer 7

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

});

Answer 8

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