CODEWITHSUNDEEP
javascriptjquery
Tim Yang
Tim Yang

Reputation: 23

jquery not function miss element

I use a tool-tip to display error message on the page, I need it to be closed when I click elsewhere within the view. I use the below codes to control this action:

$(':not(.qtip)').click(function(){
   $('.qtip').hide();
});

The ".qtip" is used for marking the tool-tip area. The tool-tip itself creates a new one when it comes out, what happened here is when I click on the tool-tip, it disappears.

But when I use a smaller scale of the selector instead of the whole body, it works fine, which is a little weird, for example:

$("#id").not('.qtip').click(function (){
    $('.qtip').hide();
});

Upvotes: 1

Views: 91

Answers (4)

Jai
Jai

Reputation: 74738

I suggest you to do two things:

$(document).click(function() {
    $('.qtip').hide();
});


$('.qtip').click(function(e){
    e.stopPropagation();
});
  1. click of document to hide the .qtip
  2. stop the event bubbling on click of .qtip, here click won't traverse up to the parent.

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173612

It would be advisable to just target document for handling the click outside of your tooltip; the selector for :not(.qtip) potentially returns a very big result set.

$(document).on('click', function() {
    $('.qtip').hide();
}

On the tooltip itself you would need to prevent the click event from bubbling to document level, if you're not doing so yet:

$('.qtip').on('click', false);

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388346

Try

$(document).on("click", function(e) {
    var qtip = $(e.target).closest('.qtip');
    if(!qtip.length)
        $('.qtip').hide();
});

Upvotes: 0

epascarello
epascarello

Reputation: 207517

Use event bubbling to your advantage

$(document).on("mouseup", function (e) {
    var target = e.target || e.srcElement;
    var container = $(".qtip");

    if (container.not(target) && container.has(target).length === 0)
    {
        container.hide();
    }
});

Upvotes: 1

Related Questions