IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jQuery Unbind ne fonctionne pas


Sujet :

jQuery

  1. #1
    Membre confirmé
    Avatar de cahnory
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    203
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 203
    Par défaut jQuery Unbind ne fonctionne pas
    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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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é
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Avatar de cahnory
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    203
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 203
    Par défaut
    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.

  4. #4
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2006
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Octobre 2006
    Messages : 205
    Par défaut 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)

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour.

    Citation Envoyé par cahnory Voir le message
    ...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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Jquery qui ne fonctionne pas ?
    Par Invité dans le forum jQuery
    Réponses: 3
    Dernier message: 03/07/2013, 15h26
  2. Réponses: 2
    Dernier message: 10/06/2013, 09h24
  3. [CodeIgniter][JQuery]tableTools ne fonctionne pas
    Par sohnic dans le forum Langage
    Réponses: 1
    Dernier message: 24/04/2013, 09h22
  4. Réponses: 0
    Dernier message: 03/03/2011, 15h39
  5. [SP-2007] jQuery.attr ne fonctionne pas !
    Par Sash ça crashe dans le forum Développement Sharepoint
    Réponses: 9
    Dernier message: 17/02/2011, 09h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo