Hiding popup if click was made outside. Why my script doesn't work?

Question

I found a solution here, on stackoverflow, the script is following:

jQuery(document).mouseup(function (e){
    var container = jQuery(".quick-info");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Mine try was:

jQuery('body:has(.quick-info:visible):not(.quick-info)').click(function (e) {
    jQuery(".quick-info").hide();
});

So my script means: Catch click which was made on body, but not on .quick-info, and body has .quick-info visible. What might be the problem? May be some wrong selector?

UPDATE 1

Based on Raminson answer.

jQuery('body > *:not(.quick-info)').click(function (e) {    
    var container = jQuery(".quick-info");
    if (container.has(e.target).length === 0 && e.target.nodeName != 'A'){
    jQuery(".quick-info").hide();
    }

});

So with > only single selector chosen.

e.target.nodeName != 'A' is for link , which opens this window. I know, that I could put class or something there.

Ram · Answer 1 · 2012-07-18T08:37:01.993

0

Try the following:

$(document).on("click", function(e) {
  if (!$(e.target).hasClass("quick-info") && $('.quick-info').is(':visible')) {
     $(".quick-info").hide();
  }
});

DEMO

edited Jul 18 '12 at 08:37

answered Jul 18 '12 at 06:19

Ram

143,282
16
168
197

What if `target` has other classes but `quick-info`? – VisioN Jul 18 '12 at 06:22
as you see in solution I use mostly the same approach, with little extend. moreover I have a solution, I am just interested why my selector didn't work. – Jevgeni Smirnov Jul 18 '12 at 07:06
@JevgeniSmirnov your selector should be `$('body *:not(.quick-info)')` – Ram Jul 18 '12 at 07:10
seems more or less right direction. but how to handle :has(.quick-info:visible)? – Jevgeni Smirnov Jul 18 '12 at 08:15
@JevgeniSmirnov why do you need this? is this necessary? – Ram Jul 18 '12 at 08:16
@Raminson, Well the selector should work only if .quick-info is visible. So not to handle cases when .quick-info is invisible. As you see I'v already solved my problem, before posting. But I am curious: WHY :has doesn't work? – Jevgeni Smirnov Jul 18 '12 at 08:31
@JevgeniSmirnov that's not a way good binding an event to a selector, body that has a visible element doesn't make sense, you can try `$(.quick-info').is(':visible')` instead – Ram Jul 18 '12 at 08:36

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

Or :

jQuery('body:has(.quick-info:visible)').click(function (e){
    if($(e.target).is(".quick-info")) return;
    jQuery(".quick-info").hide();
});

//if($(e.target).hasClass("quick-info")) return;

based on VisioN comment and THIS post hasClass() is to prefer at is()

edited May 23 '17 at 12:27

Community

1
1

answered Jul 18 '12 at 06:24

Alex Ball

4,404
2
17
23

@VisioN Your are right: [This](http://stackoverflow.com/questions/4901553/jquery-hasclass-vs-is) – Alex Ball Jul 18 '12 at 06:30
It didn't work %( Moreover this kind of selector doesn't work body:has(.quick-info:visible). I'v put logging, but it doesn't log anything. – Jevgeni Smirnov Jul 18 '12 at 07:09
@JevgeniSmirnov check this [Fiddle](http://jsfiddle.net/Y9k3g/), you can wrap the function in if statement – Alex Ball Jul 18 '12 at 07:45
@AlexBall thank you for you Fiddle, but this is not that I want, because I need to attach a click handler to anything, except quick info and it's child, in body, where quick info is visible. Not to catch all the click on html or body and then filter them. – Jevgeni Smirnov Jul 18 '12 at 08:15
@JevgeniSmirnov see what happern with: `alert(jQuery('body').has('.quick-info:visible').length);`and `alert(jQuery('body:has(.quick-info:visible)').length);` could you change your original selector with this, if > 0 and so on ... try it in my previus fiddle. – Alex Ball Jul 18 '12 at 08:33

score 0 · Answer 3 · answered Jul 18 '12 at 08:16

I've had sooooo many problems trying to get "click outside"-logic to work. I came over this plugin: http://benalman.com/projects/jquery-outside-events-plugin/ that solved everything for me. You simply bind the event on the element. You could give it a try, even tho I see you have solved your own problem.

Hiding popup if click was made outside. Why my script doesn't work?

3 Answers3