0

I'm using javascript with JQuery and am running into the following problem:

I assigned a tr in a table to go somewhere using the onclick attribute (since you can't use a a tag with a tr). Since the code was so trivial, I just did inline javascript without JQuery. The issue is that I have another link inside one of the table cells, but when I click that link, the tr link gets activated first and I'm sent to the wrong page.

This is what my tr link looks like: onclick="javascript:document.location.href = '/1/display"

This is one of the JQuery clicks on a cell. There are regular a tag links as well:

thi.click(function(e){ // Thi is a a tag.
    open_entry_id = thi.attr('data-id');
});

Is there anyway to fix it so that the tr link is only used when none of its children are clicked? (By children, I mean children that are clickable. I still want it to link when I click regular text in the tr)

sinθ
  • 11,093
  • 25
  • 85
  • 121

2 Answers2

1

Since you're using jQuery, use it's .stopPropagation() method on your links. That way the click event on the links won't bubble up (propagate) to the click event on your table rows.

In general:

$('a').click(function(e){
    e.stopPropagation();
})
j08691
  • 204,283
  • 31
  • 260
  • 272
  • I actually have stuff already going on for the a tag using the `click`. I tried adding `e.stopPropogation` to the top of the function (now in my original question.), but it did not work. – sinθ Jun 30 '13 at 02:37
  • It's `e.stopPropagation`, not `e.stopPropogation`. Did you include the `e` parameter in the function argument list as well? – j08691 Jun 30 '13 at 02:38
  • 1
    *palm to forehead* Embarrassing typo... It works now. Thank you! – sinθ Jun 30 '13 at 02:39
0

Yes, you should prevent event-bubbling. In jQuery this is done with event.stopPropagation(). You should put that in the function called by the child.

Community
  • 1
  • 1
Jonathan
  • 8,771
  • 4
  • 41
  • 78