Question

I have the following html elements

<div id="featured">
...
    <div class="playlist_box" style="display: block; ">
        <ul>
            <li><a href="javascript:void(0)" class="list" fileid="undefined"> element 1</a></li>
            <li><a href="javascript:void(0)" class="list" fileid="undefined"> element 2</a></li> 
            <li><a href="javascript:void(0)" class="list" fileid="undefined"> element 3</a></li>
        </ul>
    </div>
</div>

I want to apply an onclick event handler to featured that will not be triggered when the area marked with .playlist_box. I tried to deselect various elements, non works, some of them are:

  jQuery("#featured").not('.playlist').click(function()...
  jQuery("#featured").not('li').click(function()...

It seems that not() doesn’t work. Any ideas?

Answer 1

.not() removes elements from the set of matched elements.
You’re only selecting the div with id #featured so .not() will just return the div again. Furthermore the class is playlist_box not playlist.

If you insist on .not() then you will have to do something like

$("#featured").children().not(".playlist_box").click(...);

But why not just

$("#featured").on("click", "li.list", function(ev) {
    if ($(this).closest("div").hasClass("playlist_box")) {
        // do something
    } else {
        // do something else
    }
});

One handler to rule them all 😀

Edit: Added check for parent