Stop table row toggle upon clicking link

Question

What I am trying to do is to stop the toggling when someone clicks on a url link in the table row.

$(document).ready(function () {
    $("#report tr:odd").addClass("odd");
    $("#report tr:not(.odd)").hide();
    $("#report tr:first-child").show();

    $("#report tr.odd").click(function () {
        $(this).next("tr").toggle();
        $(this).find(".arrow").toggleClass("up");
    });
    //$("#report").jExpand();
});

The url link sits right on the same toggling row which in turn when someone clicks the url link, it also toggles the row which I am trying to stop. Any pointers on how to do this?

Answer 1

As the anchor is in tr element,whenever click on anchor is called ,the event will be propagated to the parent tr and its click function is also executed.

$('a').click(function(e){
    e.stopPropagation();
});

this stops the event of anchor click to bubble up to the parent

Answer 2

I think below might work for you. Not tested though.

add a Javascript function call in your link

$("#ANCHIOR_ID").click(function(event){
    event.stopPropagation();
    // then do your job there that you want to do in on click
  });