Isn't this working as it's supposed to?
The click-event bubbles up (event propagation) as supposed since there is
nothing stopping it from doing so. Therefore the parent fires the function.
Do notice that preventDefault does not stop the event from propagating
upwards in the DOM tree.
"Cancels the event if it is cancelable, without stopping further propagation
of the event."
(http://developer.mozilla.org/en/docs/DOM:event.preventDefault)
Shouldn't you just use return false to block this: (which should stop the
propagation, IIRC):
Add (untested):
$("ul.style4 > li").bind("click", function() { return false; });
or just check for style 3 in the original click function:
(also untested)
$("ul.style3 > li").bind("click", function(e) {
if($(e.target).parent().is('.style3'))
{
$(this).children("ul").slideToggle(50);
return false;
}
});
HTH
--
Suni
Mika Tuupola wrote:
In the example below id's (first_li, second_li, etc) are only used
for debugging purposes.
http://www.appelsiini.net/~tuupola/jquery/bugs/click-1.1.2.html
I have nested lists. When clicking li element of parent list it
sibling ul will be hidden and shown. This works as expected.
Problem is clicking li element in sibling list will hide sibling
(itself). Loggin to console shows (check element id) that the click
event was fired on parent element.
Question is, is the click event leaking out from sibling or is this
expected behaviour?
-cut-
$("ul.style3 > li").bind("click", function(e) {
e.preventDefault();
$(this).children("ul").slideToggle(50);
console.log(this);
});
-cut-
-cut-
<ul class="style3" style="margin-bottom:5px;">
<li id="first_li"><a href="#">Lorem ipsum</a>
<ul class="style4">
<li><a href="#">Proin egestas urna</a></li>
<li><a href="#">Proin urn egestas</a></li>
</ul>
</li>
</ul>
-cut-
