jquery document corps un clic événement

Question

Quelqu'un pourrait m'aider avec ça? :

J'ai un bouton qui quand on clique il montre un certain div. Cette div a plusieurs descendants. Maintenant, ce que je veux, c'est que lorsque je clique ailleurs dans le document, mais pas dans aucun de ces descendants que ce div disparaisse. ce que je pensais était d'utiliser le sélecteur pas comme ceci:

$("#button").click(function(){ 
    $("#mydiv").show(); 
    $(document.body).not($("#mydiv").children()).one('click',function(e) { 
     $("#mydiv").hide(); 
    }); 
     return false; 
}); 

mais cela ne fonctionne pas! Une idée pourquoi? merci

Answer 1

Que diriez-vous de vérifier l'événement de clic pour voir ce qui a été cliqué? Plus précisément, regardez le event.target.

$(document).click(function(event) { 
    var target = $(event.target); 

    if (!target.attr('id').match(/^mydiv/) && target.parents('#mydiv').length == 0) { 
    $('#mydiv').hide(); 
    } 
}); 

J'ai déjà utilisé ce code pour fermer une fenêtre ouverte lorsqu'un utilisateur clique n'importe où à l'exception de la fenêtre.

Answer 2

Utilisez le plus proche pour vérifier si la cible est un descendant de mydiv.

$("#button").click(function(){ 
    $("#mydiv").show(); 
    $(document.body).click(function() { 
     if ($(event.target).closest("#mydiv").length == 0) 
      $("#mydiv").hide();  
    }); 
    return false; 
}); 

Vous ne pouvez pas utiliser one() parce que l'événement serait supprimeront si vous cliquez à l'intérieur mydiv. Vous devrez faire un détachement d'événement personnalisé si vous voulez le supprimer.

Answer 3

Le problème est peut-être ce que vous êtes de passage dans la .not() d'exclure

.not($("#mydiv").children()) 

Au moment où vous passez un objet jQuery, mais from the docs, ce qui est passé dans .not() doit être une chaîne selector, un élément DOM ou un tableau d'éléments DOM. Par conséquent, la conversion simplement l'objet jQuery à un ensemble d'éléments devraient travailler

$("#button").click(function(){ 
    var myDiv = $("#mydiv").show(); 
    $(document.body).not(myDiv.children().get()).one('click',function(e) { 
     myDiv.hide();  
    }); 
     return false; 
});