0

I've got a table which looks like this:

<table id="display">
    <tr class="trigger">
        <td>Info here</td>
        <td><a href="example.com">Link here</td>
    </tr>
</table>

I've got a jQuery script running "onclick" on trigger, so when trigger is clicked, it performs an action. The problem with this is that the <a href> functionality is lost because the tr is layered on top. Click on the link will just trigger the trigger action, not the link action.

Is there a way I can bring this link to ignore the other functionality and perform native? I've tried setting the a to z-index: 9999; as well as position: absolute; but neither solved the issue.

The jQuery script looks like this (its a simple tree view):

$(document).ready(function(){
    $("tr.trigger").click(function () {
       $(this).next().animate({
          height: 'toggle', opacity: 'toggle'
        }, "fast");
        $(this).toggleClass("opened");
        return false;
    }); 
});
JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Luke Shaheen
  • 4,262
  • 12
  • 52
  • 82
  • Instead of using the `$(this)` selector twice in a row you can chain the function calls: `$(this).next().animate({height: 'toggle', opacity: 'toggle'}, "fast").toggleClass("opened");` – Jasper Dec 12 '11 at 17:40
  • @Jasper: the `toggleClass()` will call on the `.next()` object, not on the original. You'll need to place `.toggleClass()` *before* `.next()`. – Blender Dec 12 '11 at 17:41
  • @Blender Or use `.end()` after the `.animate()` function call, good catch: `$(this).next().animate({height: 'toggle', opacity: 'toggle'}, "fast").end().toggleClass("opened");` – Jasper Dec 12 '11 at 17:42

1 Answers1

4

You need to stop the event from propagating to the parent element:

$("tr.trigger a").click(function(e) {
  // Your code

  return false;
});
Blender
  • 289,723
  • 53
  • 439
  • 496
  • 2
    Doesn't `return false` == `e.preventDefault(); e.stopPropagation();` inside a jQuery event handler? Source: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Jasper Dec 12 '11 at 17:37
  • Jasper, it's true but. Blender has set `e.stopPropagation` for an `a` tag, and John for `tr` tag. – welldan97 Dec 12 '11 at 17:39
  • @welldan97 Good call I didn't catch that. – Jasper Dec 12 '11 at 17:40