CODEWITHSUNDEEP
jquery
Potney Switters
Potney Switters

Reputation: 3062

not() function does not work

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?

Upvotes: 1

Views: 74

Answers (3)

Andreas
Andreas

Reputation: 21881

.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 :D

Edit: Added check for parent

Upvotes: 2

Shannon
Shannon

Reputation: 570

Why not use something like this? 

$("#featured:not('.playlist')").click(function() {
    //function
});

Here is how to use it.

Upvotes: 2

Hazem Salama
Hazem Salama

Reputation: 15101

It seems like it works just fine, see the fiddle

Also, note that you are trying to apply playlist which does not exist. You should be looking for playlist_box . However, if you do so, it will not work with .not() since you are applying .not() to the #featured which does not have that class, so it will fail, you need to use the filter :not() Or otherwise use jQuery("a").not('.list').click(function(){

You may also try doing it like this

jQuery("#featured:not('.playlist')")

See this fiddle

Upvotes: 1

Related Questions