How to use event.stopPropagation() in delegate()

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;
});