CODEWITHSUNDEEP
jquery
Sam
Sam

Reputation: 51

JQuery :not selector being ignored?

Don't know if I'm using the not selector incorrectly but I want everything clicked on to do something apart from the id in the not selector.

Neither of these have worked, I get an alert when the logo is clicked:

$('body').not('#logo').click(function(){ 
alert('hi');
});

$('body:not(#logo)').click(function(){ 
alert('hi');
});

And the html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $(document).ready(function(){

    $('body').not('#logo').click(function(){ 
    alert('hi');
    });

    });
    </script>
    </head>

    <body>
    <div style='width:900px; margin:0 auto; background-color:red; height:600px;'>
    <div id='logo' style='background-color:black; width:200px; height:200px;'>
    </div>
    </div>
    </body>
    </html>

Upvotes: 0

Views: 93

Answers (1)

James Montagne
James Montagne

Reputation: 78650

@Alexander's description of what your code is doing is correct. You are matching <body> elements which do not have an id of logo. Since you have only one body tag and it does not have an id of logo, your selector selects your body tag.

One way of doing what you are trying to do would be to attach a handler to the body but then prevent event bubbling on the logo. That would look something like this:

$('body').click(function(){ 
  alert('hi');
});

$("#logo").click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/jJyaA/1/

Upvotes: 3

Related Questions