unbind et bind click

**flyingfr53** · 30/09/2010, 23h11

Bonjour,

Afin de réaliser un editeur dans une table style jeditable,
j'utilise la propriété unbind pour desactiver le click sur la case d'un tableau et pouvoir l'editer, mais je n'arrive pas à le reactiver une fois que ma modification est faite
mon code ressemble a ça

Code :

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

1
2
3
4
5
6
7
8
$(".clk").click( function editable()
            {
            $(this).unbind('click');
             ident =  this.id; 
             value = $(this).text();
            $(this).html("<input  size='10' type='text' name="+ident+"  value="+ value +" onkeyup=submitenter(event,value,name) />"); // ouvre un champ input dans la case cliquée avec value en valeur          
 
             });

une fois que ma nouvelle valeur est sauvée par une requête ajax je veux retablir le click sur la table et j'essaye sans succès:

Code :

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

 $("#"+ name).bind('click');

comment peut on retablir le click sur la case?

Merci de votre aide

**danielhagnoul** · 01/10/2010, 01h09

Bonsoir

Exemple à copier-coller et à afficher dans votre navigateur :

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
    <base href="http://danielhagnoul.developpez.com/">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="styles/dvjhBase.css">	
	<style>
 
	</style>
    <!--[if lt IE 9]>
    <script charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script charset="utf-8" src="lib/excanvas.js"></script>
    <![endif]--> 
</head>
<body>
	<section id="conteneur">
        <header>
            <h1>Forum jQuery</h1>
        </header>
        <aside>
            <div id="badgeDVP">
                <div class="badgeLogo">
                    <span class="badgeName">
                        <a href="http://www.developpez.net/forums/member.php?u=285162"  alt="Mon profil" title="Mon profil">Daniel Hagnoul</a>
                    </span>
                    <span class="badgePhoto" alt="Avatar de Daniel Hagnoul" title="Avatar de Daniel Hagnoul"></span>
                    <span class="badgeCorps">
                        <p style="font-weight:bold;">
                            Rédacteur / Modérateur
                        </p>
                        <p>
                            <a target="_blank" href="http://danielhagnoul.developpez.com">
                                <img src="http://www.developpez.net/forums/images/buttons/rss2.png" alt="Mon cahier d’exercices sur jQuery" title="Mon cahier d’exercices sur jQuery"/>
                            </a>
                            <a target="_blank" href="http://www.developpez.net/forums/profile.php?do=addlist&userlist=friend&u=285162">
                                <img src="http://www.developpez.com/public/images/devenir-ami.png" alt="Devenir mon ami sur Developpez.com" title="Devenir mon ami sur Developpez.com"/>
                            </a>
                            <a target="_blank" href="http://www.developpez.net/forums/private.php?do=newpm&amp;u=285162">
                                <img src="http://www.developpez.com/public/images/message.png" alt="Envoyer un courriel privé sur Developpez.com" title="Envoyer un courriel privé sur Developpez.com"/>
                            </a>
                        </p>
                        <p style="text-align:left;">
                            <a target="_blank" href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/" alt="Retrouvez-moi sur le forum jQuery" title="Retrouvez-moi sur le forum jQuery">
                                Forum jQuery
                            </a>
                        </p>
                        <p style="text-align:left;">
                            <a target="_blank" href="http://www.developpez.net/forums/search.php?do=finduser&u=285162" alt="Retrouvez toutes mes interventions sur Developpez.com" title="Retrouvez toutes mes interventions sur Developpez.com">
                                Mes interventions
                            </a>
                        </p>
                    </span>
                    <span class="badgeDvp">
                        <a target="_blank" href="http://www.developpez.com" alt="Club des professionnels de l'informatique" title="Club des professionnels de l'informatique">www.developpez.com</a>
                    </span>
                </div>
            </div>
            <div id="texte">
                <h1>Tutoriels</h1>
                <p>
                    <a href="tutoriels/javascript/outils-pour-construire-code-jquery-evolutif/">Outils pour construire un code jQuery évolutif</a>
                </p>
                <p>
                    <a href="tutoriels/javascript/outil-poopj-et-sa-methode-utilisation/">Programmation orientée objet par prototype avec jQuery</a>
                </p>
                <h1>Site web</h1>
                <p>
                    <a href="index.php">Mon cahier d’exercices sur jQuery & Co</a>
                </p>
                <h1>Règles</h1>
                <p>
                    <a href="http://www.developpez.net/forums/d846412/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/devez-lu-derniere-version-message-dutiliser-forum/">Vous devez avoir lu la dernière version (2010-01-06) de ce message avant d'utiliser le forum jQuery</a>
                </p>
            </div>
        </aside>
        <article>
			<h1>bind et unbind click</h1>
            <p class="clk">Un mot pour remplir</p>
            <button id="btn">Réactiver le clic sur p.clk</button>
        </article>
        <article id="affiche">
            <h1>Résultat</h1>
        </article>
        <article>
            <h1>Code HTML et jQuery</h1>
<pre>
&lt;h1&gt;bind et unbind click&lt;/h1&gt;
&lt;p class=&quot;clk&quot;&gt;Un mot pour remplir&lt;/p&gt;
&lt;button id=&quot;btn&quot;&gt;Réactiver le clic sur p.clk&lt;/button&gt;
 
&lt;script&gt;
    $(function(){
        var clickHandler = function(){
            $(this).unbind('click');
 
            $(&quot;#affiche&quot;).append(&quot;&lt;p&gt;J'ai été cliqué ! ;)&lt;/p&gt;&quot;);
        };
 
        $(&quot;.clk&quot;).bind(&quot;click&quot;, clickHandler);
 
        $(&quot;#btn&quot;).click(function(){
            $(&quot;.clk&quot;).bind(&quot;click&quot;, clickHandler);
        });
    });
&lt;/script&gt;
</pre>
        </article>
        <footer>
            <p>Daniel Hagnoul 2010-10-01</p>
        </footer>
	</section>
	<script charset="utf-8" src="lib/jqueryui/js/jquery-1.4.2.min.js"></script>
    <script>
        $(function(){
            var clickHandler = function(){
                $(this).unbind('click');
 
                $("#affiche").append("<p>J'ai été cliqué ! ;)</p>");
            };
 
            $(".clk").bind("click", clickHandler);
 
            $("#btn").click(function(){
                $(".clk").bind("click", clickHandler);
            });
        });
    </script>
</body>  
</html>

**flyingfr53** · 03/10/2010, 12h18

désolé mais j'ai essayer d'adapter ton code au mien et je n'y arrive pas.

ma fonction est désormais

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 $(function(){
            var clickHandler = function(){
                $(this).unbind('click');
                value = $(this).text(); 
                 ident =  this.id; 
                 $(this).html("<input  size='10' type='text' name="+ident+"  value="+ value +" onkeyup=submitenter(event,value,name) />");  
            };
 
            $(".clk").bind("click", clickHandler);
 
 
        });

avec la fonction submitenter qui m'actualise ma base de données si l'utilisateur presse enter et me reaffiche la nouvelle valeur.

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
      function submitenter(keycode,value,name)
{if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
   {   
   var request= new XMLHttpRequest();
   var url    = "editable_ajax_jp.php";
   var param="valeur=" +escape(value)+"&reference=" + escape(name);
   request.open("POST",url,false );
   request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   request.setRequestHeader("Content-length", param.length);
   request.send(param);
   $("#"+name).html(value);   
 
   return true;
   }
else
   return true;
}

mon problème est que tout fonctionne bien mais une fois que ma case a été éditée une fois il n'est plus possible de la rééditer sans effectuer une actualisation de la page.

Merci de votre aide.

unbind et bind click

jQuery

Vue hybride

Discussions similaires

Partager

Partager