Evenement blur conditionnel

**kheraud** · 29/11/2009, 15h23

Bonjour,

J'ai une structure comme suit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="newMachin">
    <input type="text" div="titleNewMachin" />
    <span>Text</span>
    <div>Nouvel élément</div>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</div>

Le focus est donné à l'input #titleNewMachin lors de la création de ce div. Je souhaiterai faire un traitement sur le div#newMachin lorsque le focus est perdu hors du div. Si je fais un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#newMachin').blur(function {
... });

Cela ne prend jamais l'évenement car le focus n'est jamais sur #newMachin mais sur l'input#titleNewMachin.

Je souhaiterais qu'on trigger le blur quand il y a un click, tab... qui soit hors du div. Un clicj sur la liste <ul> ne doit pas lancer d'évenement.

Je tourne en rond depuis 1/2j, voyez vous une solution ?

Merci pour votre aide

kheraud

**danielhagnoul** · 29/11/2009, 23h29

Bonsoir.

Je ne suis pas certain d'avoir bien compris la question, mais j'espère que oui, la meilleure que j'ai trouvée est celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // false par défaut, true si les conditions sont remplies
            var boolDivNewMachin = true;
 
            $("div").not("#conteneur, #newMachin, #newMachin div").mouseenter(function(){
                //console.log("le pointeur est sur une autre division");
 
                if (boolDivNewMachin){
                    $("#newMachin").append("<div id='" + $("#inputID").attr("div") + "' style='width:150px; height:150px; border:1px solid red;'></div>");
                    boolDivNewMachin = false;
                }
            });
        });
     </script>
</head>
<body>
    <div id="conteneur">
 
        <div id="newMachin" style="border:1px solid black;">
 
            <input id="inputID" type="text" div="titleNewMachin" />
 
            <span>Text</span>
 
            <div>Nouvel élément</div>
 
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
 
        </div>
 
        <div id="autreDiv">
            <p>
                Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.
            </p>
        </div>
 
        <div>
            <p>
                Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.
            </p>
        </div>
 
    </div>
</body>
</html>

Evenement blur conditionnel

jQuery

Discussions similaires

Partager

Partager