How to make work inside clickable

Question

I have a table where each <tr> links to another page. This is code i use to archive this.

Table:

<tbody>
    <tr class="td-link" data-href="/invoice/preview/207/">
         <td>#14000059</td>
         <td>
             <a class="kt_ajax_link" data-invoiceid="207" data-csrf-token="43e848a61f3dadedc182a1454c8070550e4f275fe83d53ef1ac9f961281f1ba4" data-action="/invoice/delete/"><i class="fa fa-trash-alt"></i></a>
        </td>
    </tr>                                                                                                                                            
</tbody>

jQuery

$(".td-link").click(function() {
    window.location = $(this).data("href");
});

How can i make the link <a> work inside the table, without triggering the jQuery link?

I have tried with z-index, but cant get it working.

Any suggestions?

create a click event for `` then use [`e.stopPropagation()`](https://api.jquery.com/event.stopPropagation/) — Mohamed-Yousef, May 24 '19 at 19:07
@Mohamed-Yousef why don't you write out a full solution so that you can be credited for this? — Grant Noe, May 24 '19 at 19:09
@GrantNoe Because this line of comment can help him reading about `event.stoppropagation()` and he just need a guide to help him with a method to how to do that .. Also till now we don't know this line can help or not .. So its no need for post it as an answer .. he can read about it and use it up to his need — Mohamed-Yousef, May 24 '19 at 19:15
@Mohamed-Yousef And here I was thinking you didn't answer because you knew it was a duplicate many times over ;). — Heretic Monkey, May 24 '19 at 19:16
@HereticMonkey may be this is another reason ;) .. I just guide him to the method .. and my comment is just a shortcut :) — Mohamed-Yousef, May 24 '19 at 19:18

score 2 · Answer 1 · answered May 24 '19 at 19:11

You can prevent the click event from propagating up to the <tr/> by adding this attribute to the <a> tag: onclick="event.stopPropagation();".

More info here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

edit: didn't mean to steal Mohamad's comment. Will delete if he posts his as an answer

sohaieb azaiez · Accepted Answer · 2019-05-24T20:30:55.493

1

first you have to replace this line :

$(this).data("href"); by this line :

$(this).attr("href");
- Second, it is better to work with this :
  
  $("body").on('click','.td-link',function(e) {..} instead of $(".td-link").click(..)
- Finally, you can do the work as @rosslh & @Mohammed suggest to you .

here is an example that I tested and it worked for me :

$("body").on('click','.td-link',function(e) {
    //e.preventDefault();
    //e.stopPropagation();
    var $link = $(this).attr("data-href");
    window.location = $link;
  });

edited May 24 '19 at 20:30

answered May 24 '19 at 19:36

sohaieb azaiez

768
9
20

Why are your propagation lines commented out? – Grant Noe May 24 '19 at 20:14
1

because, by default , in a block, the **** tag is targetted by click first than the one, you can test it if you want . and to add : that not all browsers supports what I said, so I putted `//e.stopPropagation() ` in case if he wants it to work with all browsers so he can uncomment it in that case (sorry for my english) – sohaieb azaiez May 24 '19 at 20:33

How to make work inside clickable

2 Answers2