如何在委托（）中使用event.stopPropagation（）

Question

My Code is like following in html:

<li class="arrow">    
    <div>
        <a href="javascript:void(0);" class="anchor">remove</a> 
    </div>                      
</li>

And I bind my elements using deligate() jquery method (because elements appear dynamically)

$obj.delegate(".arrow", "click", function() {
    alert("clicked on arrow");
});

$obj.delegate(".anchor", "click", function(event) {
     event.stopPropagation();
     alert("anchor clicked");
});

My Problem is, when I click on ".anchor" then both events occurs. can anyone tell me how to use event.stopPropagation() in this context? I tried like the above but not working. Is there any other way to do this?

EDIT: I tried with calling event.isPropagationStopped(), and it returns true. but still both events called.

Answer 1

There is limitations when delegate or live is used and stopPropagation .

You return false in you handler to prevent both eventPropagation and default

Try

$obj.delegate(".anchor", "click", function(event) {
     alert("anchor clicked");
     return false;
});

Answer 2

My understanding is that with .delegate and .live you need to return false . I believe this is because of how the event is attached - not to the element but to it's ancestor.

Here is an example: http://jsfiddle.net/G3k8Z/