Click on both nested <li>s

Question

Good day. I've searched high and low. Found nothing.

I have this structure:

<ul class='c1'>
  <li>
AAA
    <ul class='c2'>
      <li>
BBB
      </li>
    </ul>
  </li>
</ul>

And jquery handler:

$('.c1>li').bind('dblclick',function() {
    alert('a')
});
$('.c2>li').bind('dblclick',function() {
    alert('b')
});

But when i click C2's li i get both messages instead of just 'b'. event.stopPropagation() cant solve the problem

Thank you.

Answer 1

You would also need to use event as parameter in function for using with stopPropagation:

$('.c2>li').bind('dblclick',function(event) {
   event.stopPropagation() 
   alert('b')
});

Working Demo

Answer 2

You can return false after a statement

$('.c1>li').bind('dblclick', function() {
    alert('a');
    return false;
});

$('.c2>li').bind('dblclick', function() {
    alert('b');
    return false;
});

Answer 3

You can use this code

$( "ul.c1 li" ).children().dblclick(function(e){
    e.stopPropagation(); 
    alert("a");
})

$( "ul.c2 li" ).children().dblclick(function(e){
    e.stopPropagation();
    alert("b");
})