Jquery_Problème de réutilisation d'un évènement click sur un élément supprimé puRésolu

Question

Bien le bonsoir à vous.
Premier post sur le forum de ma part ;) .

Je rencontre un problème avec l'utilisation du framework jquery.
Contexte : Dans mon exemple, j'ai un tableau html contenant 2 colonnes : Titre et Modification.
La colonne modification contient à chaque ligne un bouton "Modifier". 
Ce bouton, lorsque l'on clique dessus, permet de remplacer le titre qui lui correspond par un champ de saisie, ainsi que de remplacer "Modifier" par "Valider".
Lorsque l'on clique sur "Valider", le champ de saisie disparait et la valeur est stockée dans la case. Le bouton "Modifier" réapparait à la place de "Valider".
Problème : 
Le script fonctionne, sauf qu'après une modification, le bouton "Modifier" régénéré côté client ne fonctionne plus!!
Quelque chose m'échappe donc, peut-être une incompréhension sur certains mécanismes de fonctionnement de la librairie.
Quelqu'un pourrait-il m'aider ?

Je vous joins mon code source :

Javascript : 
$(document).ready(function(){    
    
    //Evenement si on clique "Modifier"
    $('.btnModifier').click(function()
    {
        //On récupère l'objet du DOM correspondat à la ligne du tableau à modifier :
        var objLigneModif = $(this).parent().parent();
        
        //On sauvegarde la valeur actuelle du titre :
        var titreActuelLigne = objLigneModif.children(".tabLigneTitre").html();
        
        //On modifie le contenu de la ligne :
        objLigneModif.children(".tabLigneTitre").html(""
                                                      );
        objLigneModif.children(".tabLigneModif").html("Valider");
        
        //Evenement si on clique sur"VALIDER"
        $(".btnValider").click(function()
        {
            //On modifie le contenu de la ligne :          objLigneModif.children(".tabLigneTitre").html(objLigneModif.children(".tabLigneTitre").children(".classLigneTitre").val());
                                                          
            objLigneModif.children(".tabLigneModif").html("Modifier");            
        });
    });
});

Page Html : 
           
        ----

            Titre : |
            Modification : |
       
       
       
       
        ----

                            Titre numéro 2 :
           ,
                            Modifier
           ,
       
        ----

                                    Titre numéro 1 :
               ,
                                    Modifier
               ,
       
       
   

En vous remerciant par avance,
Cordialement,
Titouu

cs_Titouu · Accepted Answer

J'ai trouvé la solution il y a quelques jours mais n'avais pas pris le temps de vous la faire partager, désolé.

Petole Team a dit :
"- Une autre est de reprendre la fonction d'initialisation à  chaque changement... 
à voir la faisabilité avec JQUERY... "

Je t'avais répondu que j'avais essayé et que ça n'avait pas marché, mais je m'y étais mal pris.
La solution : 
En réalité, à chaque fois que l'on crée à nouveau le bouton "Modifier", il faut relancer le gestionnaire d'événements $('.btnModifier')  afin qu'il prenne en compte le nouveau bouton.

var evenementBtnModifier = function ()
{
      //Événement si on clique sur "Modifier"
      $('.btnModifier').click(function()
      {
             //Traitement....
             //Événement si on clique sur"VALIDER"
             $(".btnValider").click(function()
             {
                      //Traitement....
                      //On re-exécute la fonction evenementBtnModifier
                      evenementBtnModifier();
             }
        }
}
//Execution de evenementBtnModifier
evenementBtnModifier();

Ps: j'ai défini evenementBtnModifier  en tant que variable locale dans le but d'éviter des conflits avec des fonctions ou variables globales

Voila, en réalité c'est tout bête.
Titouu

PetoleTeam · Answer

Bonjour, 
Aucune maitrise de JQUERY de ma 
part, je te donnerais donc un avis général. 
Le comportement est normal, la 
ligne 
$(document).ready(function(){...
signifie apparament que c'est 
au chargement que cette initialisation à lieu, donc tous les éléments existants 
au début sont concernés mais pas ceux crées après. 

- Une solution est de 
changer d'approche en mettant des éléments en display:none et de les Afficher/Cacher en fonction de la 
demande... 

- Une autre est de reprendre la fonction d'initialisation à 
chaque changement... 
à voir la faisabilité avec JQUERY... 
;O)

cs_Titouu · Answer

cs_Titouu · Answer

Arf, je vois qu'il y a eu un problème d'envoie de la réponse...
Je reprend donc à peu près ce que j'avais marqué :

[auteur/PETOLETEAM/653783.aspx PetoleTeam]dit :
- Une solution est de  changer d'approche en mettant des éléments en display:none et de les Afficher/Cacher en fonction de la  demande...

REPONSE : 
Oui, je vois très bien ce que tu veux dire, je pense aussi que cela devrait fonctionner.
Le problème, c'est que l'utilisation que je compte avoir est un peu plus complexe que l'exemple que je vous ai donné.
En effet, il y a également une fonctionnalité "Ajouter" qui ajoute de nouvelles lignes au tableau html (tout est stocké dans une base de donnée , et j'utilise AJAX pour envoyer des requête HTTP Request à des pages php qui se charge de manipuler la base..). Bref, je vais être obligé de créer de nouvelle ligne dans mon tableau.
C'est pour celà que j'ai vraiment besoin de trouver un moyen pour que le principe de fonctionnement soit celui-ci, et non pas avec des display:none...

[auteur/PETOLETEAM/653783.aspx PetoleTeam]dit :
- Une autre est de reprendre la fonction d'initialisation à  chaque changement... 
à voir la faisabilité avec JQUERY...

REPONSE : 
J'ai déja essayé quelque chose comme celà. J'ai crée une fonctionnement à part qui regrouppait tout les évenements click de jquery puis je l'appelai dans le document ready ainsi
$(document).ready(function(){
     fctEvenement();
});
Mais également à la fin de mon évenement click sur "modifier", mais çà ne fonctionnait pas..

[auteur/PETOLETEAM/653783.aspx PetoleTeam]dit :
donc tous les éléments existants  au début sont concernés mais pas ceux crées après. 

REPONSE : 
Ce que je ne comprend pas, c'est que le bouton "valider" est généré après, et pourtant il fonctionne très bien...:/

En tout cas merci de ton attention, en esperant qu'on va trouver une solution ;)
PS: y-a-t'il moyen d'éditer les messages ???
Titouu

PetoleTeam · Answer

Bonjour, ----, Ce que je ne comprend pas, c'est que le bouton \"valider\" est généré après, et pourtant il fonctionne très bien.

pas les billes pour tester et répondre. Encore une autre approche, dans la même fonction d'initialisation tu testes le nodeValue de ton lien et suivant la valeur, VALIDER ou MODIFIER tu fait ce que tu as à faire. ;O)

Jquery_Problème de réutilisation d'un évènement click sur un élément supprimé pu

5 réponses

Votre réponse

Discussions similaires