détecter un click à l'extérieur d'une division

Version imprimable

Hi,

j'ai fais un pti code jquery pour afficher une liste de checkbox. Ca fonctionne bien mais j'aimerais détecter un clique à l'extérieur de la div pour faire disparaitre la div. Pour le moment il faut recliquer sur afficher :/

Si quelqu'un a une idée ... :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html> 
<head> 
<script language="javascript" src="jquery.js"></script> 
<style>
    #container {
        margin-top:30px;
    }
    #chxkDiv {
        background-color:white;
        border:solid 1px black;
        position:absolute;
    }
</style>
<script> 
$(document).ready(function() {
    $("#chxkDiv").css("display","none");
    $("#linkSelect").click(function() {
        if($("#chxkDiv").css("display")=='none')
        $("#chxkDiv").css("display","block");
        else
        $("#chxkDiv").css("display","none");
    });
 });
</script>
</head> 
<body>
    <div id="container">
    <p id="linkSelect">afficher</p>
    <div id="chxkDiv">
        <input type="checkbox" name="ckx_1" id="ckx_1" /><label for="ckx_1" >Choix 1</label><br />
    </div>
    </div>
</body> 
</html>

01/12/2009, 21h05
danielhagnoul

Bonsoir.

Je vous conseille de regarder ce post : http://www.developpez.net/forums/d84...l/#post4823788

Si cette réponse ne vous aide pas, n'hésitez pas à le faire savoir. ;)

J'ai pas compris pourquoi tu n'utilise pas les events de jquery ?

J'ai finalement trouvé la réponse à ma question ici : http://stackoverflow.com/questions/1...ide-an-element

Et voila le code final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html> 
<head> 
<script language="javascript" src="jquery.js"></script> 
<style>
	#container {
		margin-top:30px;
	}
	#chxkDiv {
		background-color:white;
		border:solid 1px black;
		position:absolute;
	}
 
</style>
<script> 
$(document).ready(function() {
	$('html').click(function() {
		$("#chxkDiv").css("display","none");
	});
 
	$('#chxkDiv').click(function(event){
		event.stopPropagation();
	});
	$("#chxkDiv").css("display","none");
	$("#linkSelect").click(function(event) {
		event.stopPropagation();
		if($("#chxkDiv").css("display")=='none')
			$("#chxkDiv").css("display","block");
		else
			$("#chxkDiv").css("display","none");
	});
 });
</script>
</head> 
<body>
	<div id="container">
	<p id="linkSelect">afficher</p>
	<div id="chxkDiv">
		<input type="checkbox" name="ckx_1" id="ckx_1" /><label for="ckx_1" >Choix 1</label><br />
	</div>
	</div>
</body> 
</html>

Si c'est cliqué sur le document ça ferme tout, mais si c'est cliqué sur une div l'évenement est arrêté donc la div reste. C'est vraiment puissant jquery