jquery tablerow click function question

Question

Hi,

I have a function that allows users to edit a row in a table by opening the data in a modal. Right now the whole row will fire the modal. What I want is to isolate the last td that contains a link that fires a function that readies the data for processing.

What happens is that when that last td is clicked the modal opens AND the ready function fires. I'm trying to stop the modal from opening.

I also have a mouseover row highlighting on each row of the table.

This is how I associate the table rows with the modal function:

$("#table").find("tr").click(function(e) {

 //code to open model
 }

This is how I fire the ready function:

$("#table tr td:last-child a").click(function(e) {
//code to open model
 }

Thanks for any help you can give,

Wali

Answer 1

Simply add "return false;":

$("#table tr td:last-child a").click(function(e) {
    // whatever should happen when clicking the anchor
    return false;
}

This prevents the event from propagating to the surrounding tr.

Answer 2

i believe you need to call e.stopPropogation() to prevent the event from propogating:

$("#table tr td:last-child a").click(function(e) {
    //code to open model
    e.stopPropagation();
    return false;
}

Explanation:

Events propagate from the most "specific" element up to their parents. This is called bubbling, and in this case, your second modal is being fired because the click event is bubbling up from the A element to the TR element.

I believe all events propagate and bubble. Return false simply cancels the default action of the A element, which is to follow the link... it doesn't stop the event object.

Here's a good explanation of the whole thing.

Answer 3

why instead of finding the link inside the last cell of any row in the table just assign a id or a class to your link

like ...

and then add the display : block property from the css which makes the anchor to fill the whole area it is contained in.

then simply

$('.anchorclass').click(function(){

// do something here

});