[jQuery] How to stop event bleeding into children?
I've got this problem I'm not sure how to resolve. Given this code:
$(document).ready(function() {
$("#leftNav > ul > li").click(function() {
alert("OK");
});
});
and given this HTML:
<div id="leftNav">
<ul>
<li>Item 1
<ul>
<li>Sub Item</li>
</ul>
</li>
<li>Item 2 - clicking here also alerts</li>
</ul>
</div>
Clicking on "Item 1" gives the alert, as does "Item 2"-- but
unexpectedly, clicking "Sub Item" also gives the alert. In fact,
clicking anywhere within that first list item will give the alert. It
seems like the event is bleeding into all the child elements of the
first <li>. How do I make it so $("#leftNav > ul > li") TRULY only
refers to JUST any list item child of the <ul>??