How to skip bubbling down phase with jquery

Question

Trying to do some administration backend things,

I have a tr line containing action links.

<tr>
    <td>
    <span>item1</span>
    </td>
    <td>
    <a href="#">delete</a>
    </td>
</tr>

When a user clicks on the tr line, it should select it (and a handler is bound to that event, so I can display extra informations somewhere else), AND when a user clicks on the delete link, another handler should be called to delete the item.

Setting the click event for both targets, like this :

$("tr").click(function(e){
        // show line infos, by reloading the page
});

$("tr a").click(function(e){
    // delete item  
});

When I click on the delete link, it appears that the tr event is always called first, and since my tr's handler reload the page the link's handler is never called. that's normal because bubbling system will call my handlers in this order :

down phase : tr a

up phase : a tr

How can I skip the first tr's handler in down phase ?

I tried a few things with e.preventDefault(), e.stopPropagation() without success.

try to use-http://api.jquery.com/event.stopImmediatePropagation/ — Vivek, Jul 15 '11 at 08:35
What you describe is not event bubbling but event capturing. But in your case, bubbling is used: http://jsfiddle.net/r3KZu/ — Sotiris, Jul 15 '11 at 08:38

score 0 · Answer 1 · answered Jul 15 '11 at 08:40

Your observations seem a little strange. The <a> should fire it's click event first, and then the <tr>. If so, the event will indeed bubble, and you can override the bubbling by stopping propagation (or returning false, which will cancel the default event and stop propagation):

$("tr").click(function(e){
    ...
});

$("tr a").click(function(e){
    ...
    return false;
});

Working example: http://jsfiddle.net/cFjmc/

score 0 · Answer 2 · answered Jul 15 '11 at 08:43

0

use event.stopImmediatePropagation

demo-

answered Jul 15 '11 at 08:43

Vivek

10,978
14
48
66

score 0 · Answer 3 · answered Jul 15 '11 at 08:50

0

yes you all are rights, I made a mistake,

sorry for the strange post, I just realized that my test case was not the one that I have submitted.

Now I can get things in the right order. Thanks.

answered Jul 15 '11 at 08:50

ling

9,545
4
52
49

How to skip bubbling down phase with jquery

3 Answers3