Element créé en jQuery innaccessible

Version imprimable

Bon voilà mon problème, je veux pouvoir éditer des lignes dans un tableau.
Pour ça mes td on une classe "cellule" qui active (au click) le remplacement des "td" du même parent (le tr) par des "input" contenant la valeur des "td".
Jusque là aucun souci
Avant cette transformation, je rebascule tous les inputs du tableaux en td simples en appliquant également la classe "cellule" à tous ces "TD"

Mon problème est que lorque la ligne est éditée et ensuite retransformée en valeurs simples, elle n'est plus active comme non reconnue dans le DOM car nouvellement créée et si j'utilise .live() alors la ligne est tout le temps clicable même lorsque'elle est éditée et du coup il est impossible de saisir dans les "input" car dès que l'on clique dessus il referme la ligne éditée... je ne sais pas si je suis clair mais voilà mon code, on peut surement faire plus simple mais bon :
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 $('.cellule').click(function() { //On remplace toutes les cellules avec un input par leur valeur $(".tab_archives td input").each( function () { $(this).replaceWith($(this).val()) ; }); $(".tab_archives td").addClass('cellule'); var liste=''; var myparent=$(this).parent('tr').get(0); var parent_id=$(this).parent('tr').get(0).id; var tds=$('#'+parent_id).get(0).children; var chaine=""; for(var i in tds){ chaine=tds[i].innerHTML; //J'écarte les élements incorrects if(typeof(chaine)!='undefined'){ //si le TD ne contient pas d'input if(chaine.indexOf('input')=='-1'){ //Je remplace chaque TD par un input avec sa valeur $(tds[i]).replaceWith('<td><input style="width:50px;" id="'+parent_id+'_'+i+'" name="'+parent_id+'_'+i+'" type="text" value="'+chaine+'"/><\/td>'); } } } });
Si vous avez une idée je suis preneur, j'ai entendu parler des fonctions callback mais je n'ai pas bien saisi comment cela fonctionne-t-il

08/02/2011, 13h41
scourjean

Juste après append, tu fais un unbind de l'évènement 'click' et un bind à nouveau de 'click' et ça sera bon.

J'ai modifié le script de la façon suivante en intégrant bind et unbind :
Mais visiblement quand je click il execute 2 fois le script "editTD" :

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
 
//Cette fonction réinitialise tous les TD du tableau, supprime la fonction au click et la réattribue
function resetTD(){
 
        //On remplace toutes les cellule avec un input pas leur valeur
        $(".tab_archives td input").each( function () {
            $(this).replaceWith($(this).val());
        });
        $(".tab_archives td").unbind('click',editTD);
        $(".tab_archives td").bind('click',function(){
                editTD($(this));
        });
    }
 
//Execution de la fonction de reset du tableau qui rend cliquable les TD
    resetTD();
 
    function editTD(td){
        resetTD();
    var liste='';
        var myparent=$(td).parent('tr').get(0);
        var parent_id=$(td).parent('tr').get(0).id;
        var tds=$('#'+parent_id).get(0).children;
        var chaine="";
 
   for(var i in tds){
            chaine=tds[i].innerHTML;
            if(typeof(chaine)!='undefined'){
                if(chaine.indexOf('input')=='-1'){
//Je désactive la fonction editTD au click pour chacun des TD édités
                    $(tds[i]).unbind('click',editTD);
                    $(tds[i]).replaceWith('<td><input style="width:50px;" id="'+parent_id+'_'+i+'" name="'+parent_id+'_'+i+'" type="text" value="'+chaine+'"/><\/td>');
 
 
                }
 
            }
        }
 
    }