Question

I have the following code:

$(document).ready(function () {
    $("tr").live('click',function(){
       alert("TR");
    });

    $("input").live('click',function(){
        alert("INPUT");    
    });    
});

Fiddle here

How can I just trigger the click function for the checkbox without triggering the tr function? Is there any solution with jQuery?

I will not set return false at the end of the input function and I really need the tr element too.

Info: event.stopPropagation doesn’t work on live() events.

Answer 1

You can use the stopPropagation() method on the event object.

It will prevent the event from bubbling up without cancelling the default event behavior.

$(document).ready(function () {
    $("tr").click(function(){
       alert("TR");
    }); 

    $("input").click(function(e){
        alert("INPUT");    
        e.stopPropagation();
    });    
});

---

As it seems you are using .live() and not direct event binding, you can’t use stopPropagation().

First of all, .live() is legagcy code and has been deprecated, which means it could be removed from the library in any future new version. I don’t know which version of jQuery you are using but you should consider moving to the latest (which is more optimized anyway) and use .on() for event delegation.

Nevertheless, if you can’t upgrade your jquery library, here’s maybe a solution to your problem. The event parameter passed to all event handler contains a property target which reference the element from which the event was initiated. So you could do something like:

$("tr").live('click',function(e){
    if (e.target.nodeName !== "INPUT") {
    // if ($(e.target).is('input') === false) { // jquery style but maybe less efficient
       alert("TR");
    }
}); 

Not very elegant but does the trick. Here’s an example.

The problem with .live() is that events are binded to the document so as more complex as your application would become, you may end up with headaches to stop propagation.

In the meantime I’ve made a fiddle using .on() (here) and one using .delegate() (here).