Question

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
 }

Answer 1

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.