jQuery Unbind ne fonctionne pas

**cahnory** · 18/09/2009, 12h45

Bonjour,

Alors voilà, je code en ce moment un plugin pour jQuery et j'ai remarqué que la fonction unbind (que j'utilise assai souvent) ne fonctionnait pas (du moins dans le cas de figure suivant).
Alors j'ai fait un petit script de test :
js/jquery.bindTest.js

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
(function($) {
	$.fn.bindTest = function(options) {
		var opt 		=	$.extend({}, $.fn.bindTest.defaults, options);	
 
		return this.each(function(){
			$(this).unbind('click', test);
			$(this).bind('click', test);
		});
 
		function test()
		{
			alert(opt.string);
		}
	};
	$.fn.bindTest.defaults = {
		string:	'test'
	};
})(jQuery);

et une page de test :
http://ns368219.ovh.net/~couveuse/In...-bindTest.html

Vous remarquerez que l'unbind n'a pas fonctionné. Si je ne précise pas la fonction ça marche mais du coup toute autre fonction sur l'événement click sera retiré.
Quelqu'un aurait une idée d'où cela provient s'il vous plaît ?
Merci

**Bovino** · 18/09/2009, 13h21

Salut,

Code :

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

1
2
3
4
return this.each(function(){
	$(this).unbind('click', test);
	$(this).bind('click', test);
});

dans la fonction anonyme, this ne fait pas référence à l'objet sélectionné

**cahnory** · 18/09/2009, 13h53

Il fait référence à quoi ? car le bind fonctionne lui. D'ailleur si j'utilise le selecteur que je récupère hors de la boucle via :

Code :

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

var selector = $(this).selector;

le unbind ne fonctionne toujours pas.
Mais si je ne précise pas de fonction lors de l'unbind ça fonctionne.

**Sourrisseau** · 18/09/2009, 20h11

le fait que tu 'unbind' en premier l'évènement click et que tu le 'bind' ensuite fait au final que tu gardes cette évènement click. Ce que dis Bovino est également exact . Quand tu cliques par exemple sur la deuxième div tu as 2 alerts.

Voila un lien avec un peu de lecture : http://docs.jquery.com/Namespaced_Events (il faudrais que je le lise d'ailleurs)

**danielhagnoul** · 20/09/2009, 13h53

Bonjour.

Envoyé par cahnory

...j'ai remarqué que la fonction unbind ne fonctionnait pas dans le cas de figure suivant.
...
Si je ne précise pas la fonction ça marche mais du coup toute autre fonction sur l'événement click sera retiré.

Vous avez raison, il y a bien un problème avec bind/unbind utilisé dans un plugin.

EDIT : Sourrisseau à raison il faut nommer l'événement.
Voir : http://www.learningjquery.com/2007/0...ce-your-events
Voici mon code de test corrigé :

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
96
97
98
99
100
101
102
103
104
105
106
107
 
<!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;
        }
        div.divEssai {
            width:100px;
            height:100px;
            border:1px solid #000000;
            margin:12px;
            padding:6px;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.bindTest = function(options) {
                var opt =    $.extend({}, $.fn.bindTest.defaults, options);    
 
                return this.each(function(i,item){
                    //alert(item.id);
                    //$(item).unbind("click", test).bind("click", {id: item.id }, test);
                    $(item).unbind("click.test").bind("click.test", {id: item.id }, test);
                });
 
                function test(event){
                    alert("div id = " + event.data.id + ", texte = " + opt.string);
                }    
            };
 
            $.fn.bindTest.defaults = {
                string:    'test'
            };
        })(jQuery);
 
        $(document).ready(function(){
                //ne s'appliquent qu'aux div d'on l'id commence par 'div'
                $("div[id^='div']").bindTest();
 
                function essai(){
                    alert("essai sur bind et unbind");
                }
 
                $("div[id^='div']").bind("click", essai);
 
                $("#btn").toggle(
                    function(){
                        $("div[id^='div']").unbind("click", essai);
                    },
                    function(){
                        $("div[id^='div']").bind("click", essai);
                    }
                );
 
                $('#div2').bindTest({string: 'test 2'});
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="btn" type="button">STOP/CONTINUE</button>
        <div id="div1" class="divEssai">Div 1</div>
        <div id="div2" class="divEssai">Div 2</div>
    </div>
</body>
</html>

jQuery Unbind ne fonctionne pas

jQuery

Vue hybride

Discussions similaires

Partager

Partager