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

Signaler
Messages postés
12
Date d'inscription
jeudi 16 avril 2009
Statut
Membre
Dernière intervention
30 avril 2009
-
Messages postés
12
Date d'inscription
jeudi 16 avril 2009
Statut
Membre
Dernière intervention
30 avril 2009
-
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

5 réponses

Messages postés
12
Date d'inscription
jeudi 16 avril 2009
Statut
Membre
Dernière intervention
30 avril 2009

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
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)
Messages postés
12
Date d'inscription
jeudi 16 avril 2009
Statut
Membre
Dernière intervention
30 avril 2009

Messages postés
12
Date d'inscription
jeudi 16 avril 2009
Statut
Membre
Dernière intervention
30 avril 2009

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, 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.</td>
</td></tr></tbody></table>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)