Jquery not selector problem

Question

First of all thank you for your consideration.

I have an html document with a wrapper (container) inside. I want to make it so that when somebody clicks on the body section of the page, they are redirected to xxx, but if they click on the wrapper (the content of the page) they don't get redirected. I have tried everything but the jquery selector for $('body') selects everything inside of the body and I don't seem to understand how to select everything not in the #wrapper. I was trying something like this:

$('*').not('#wrapper').click(function(){
      window.location = 'http://www.example.com/example-page';
     });

with no luck,

Thanks guys

Alex_

Answer 1

Probably something like this..

$(document).click(function(e){
    var el = $(e.target);
    if ( 
        (!$(el).is('#wrapper') ) &&
        $(el).closest('#wrapper').length === 0 
    ) {
        window.location.href = 'http://msn.com';
    }
});

Did not test. I wouldn't recommend this at all though, kind of intrusive and odd behavior.

Answer 2

Perhaps try using the filter function. It allows you to strip out unwanted results from an element set.

http://docs.jquery.com/Traversing/filter

Answer 3

    $('*').not('#wrapper').click(function(){
            window.location = 'http://www.merkados.com/quote-request';
    });

will bind the event to all elements except #wrapper. so, if your html is

   <div id="anotherdiv"><div id="wrapper">adsads</div></div>

#anotherdiv will receive click on adsads. You can use stopPropagation() for event

Answer 4

I think you want to use this:

$(':not(#wrapper)').click(function(){
    window.location = 'http://www.example.com/example-page';
});

Answer 5

Does stopPropagation() work on IE flavors? Perhaps, using the old "return false" in the end stops the event from getting somewhere else.

Also, some odd agent check -already available en JQuery- should do. (if MSIE, then do

event.cancelBubble = true;

else, use the stopPropagation method

event.stopPropagation();

)

Answer 6

I did it guys!! Thank you very much for opening my eyes! You guys did it! Here is the final code:

$(':not(#wrapper)').click(function(event){
      if($(this).hasClass('cl')) {
       window.location = 'http://www.example.com/example-page';
      }
        event.stopPropagation();

     });

As you can see what I did was I added a class only to the body. The stopPropagation basically stops the calls from the #wrapper so it basically works only on whatever part of the body that does have the cl and not the #wrapper.

Thanks again, you guys rock!!

Answer 7

Since events bubble up, you should just be able to attach a click event to the wrapper that cancels the bubble up to the body. After that you can attach a click event to the body element to redirect where you need it to. This would only bind click events to 2 elements.

$("#wrapper").click(function(){
    return false;
});

$("body").click(function(){
    console.log("body click");
});