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
  • 13,296
  • 21
  • 55
  • 51
Luke Shaheen
  • 4,186
  • 12
  • 49
  • 79
  • 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
  • 275,078
  • 51
  • 420
  • 480