Question

I’ve got:

$(‘#accordion > li).click(function () {

But it run’s if the #accordion li ol li is clicked as well.

Here’s the html markup:

<ul id="accordion"> 
   <li id="test1">
       <a href="#">Test</a>
       <ol>
            <li>
            <a href="#">test</a>     
            </li>
       </ol>
    </li>
</ul>

Answer 1

The problem is that the events on the descendant elements bubble up to the ancestor element. Stop this by checking whether the originating element’s (event.target) first ancestor li is the one where the function is being handled:

$('#accordion > li').click(function (event) {
    if ($(event.target).closest('li').is(this)) {
        // it's the right one
    }
});

See

• event.target
• closest
• is