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("<input name ='txtLigneTitre'"+
" class='classLigneTitre'"+
" type = 'text'"+
" value= '"+titreActuelLigne+"'/>"
);
objLigneModif.children(".tabLigneModif").html("<a class='btnValider' href='#'>Valider</a>");
//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("<a class='btnModifier' href='#'>Modifier</a>");
});
});
});
Page Html : <table id="tableauPrincipal">
<thead>
<tr>
<th>Titre :</th>
<th>Modification :</th>
</tr>
</thead>
<tbody>
<tr id="ligne_2">
<td class='tabLigneTitre'>
Titre numéro 2 :
</td>
<td class='tabLigneModif'>
<a class='btnModifier' href='#'>Modifier</a>
</td>
</tr>
<tr id="ligne_1">
<td class='tabLigneTitre'>
Titre numéro 1 :
</td>
<td class='tabLigneModif'>
<a class='btnModifier' href='#'>Modifier</a>
</td>
</tr>
</tbody>
</table>
En vous remerciant par avance,
Cordialement,
Titouu