jQuery Unbind ne fonctionne pas

Version imprimable

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:

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

18/09/2009, 13h21
Bovino
Salut,
Code:

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é ;)
18/09/2009, 13h53
cahnory

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:

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.
18/09/2009, 20h11
Sourrisseau

Je pense que

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)

Bonjour.

Citation:

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:

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>