events for nested elements

Question

I am using the listen plugin for jQuery for binding events to dynamically created elements.

In my scenario, I have a div hosting a span element.

I want function "spanClicked" to fire on span click and function "divClicked" to fire on div click

when I click on the div to fire function "divClicked", since the span is inside of it, function "spanClicked" fires instead.

I want to fire "spanClicked" when span is doubleclicked and "divClicked" when div is clicked.

Is there a way?

    $('#container_div').listen('click','li,span',function(){
        // do something
    });

Answer 1

You should read up on event bubbling in JQuery, as well as what order events happen, but a simple solution might be to add:

return false

To the end of your click functions. This will prevent their events from bubbling.