Discussion :

[borkipreiz]

Bonjour,

J'essaie de comprendre les imbrications de html, javascript, jquery, ajax.

Voici un exemple : j'ai le fichier a.php : j'intègre un fichier css, la bibliothèque Ajax, la bibliothèque JQuery et un script b.js qui contient les fonctions.

a.php contient la div <div id="liste"> et appelle une fonction qui se trouve dans b.js.

Cette fonction appelle par le biais d'ajax ($.ajax()) un script php qui remplit une variable de type txt.

Au retour de ce script php, je récupère ma variable txt qui me sert à remplir une table.

A chaque <td> de cette table, j'adjoins un attribut class="z"; cet attribut fait appel à une fonction du script b.js; cette fonction est censée mettre la ligne avec un fond d'une couleur différente du fond original.

La fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$('.z').click ( function ()
{
   tid = this.id;  
   no_ligne = tid.substr (10);
   couleur = "#96BED2";
   if ((no_ligne % 2) == 0)
   {
       couleur = "#F0FAFA";
   }
   document.getElementById (tid).style.backgroundColor = couleur;
});

Ensuite j'intègre cette table dans la <div id="liste"> de a.php.

L'affichage est correct, mais le click n'appelle pas la fonction; par contre si je mets un événement onclick sur la ligne, la fonction liée au click est bien appelée.

D'autre part, si je constitue cette table directement dans a.php (avec lecture de la table mysql), la fonction répond correctement à l'attribut class="z".

Si quelqu'un pouvait me dire ce qui ne va pas, ça me rendrait vraiment service.

Merci beaucoup.
L'événement

[borkipreiz]

Désolé, c'était totalement involontaire.

Cordialement

[Bovino]

Mille fois traité !
Tu ne peux pas attacher des événements à des éléments qui n'existent pas !

Heureusement, jQuery à tout prévu, en particulier la délégation d'événement.
Regarde du coté de .on() et particulièrement la partie "Direct and delegated events".

[Bovino]

D'autre part, dans

Code :

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

document.getElementById (tid).style.backgroundColor = couleur;

quelle est pour toi la différence entre document.getElementById (tid) et this ?

[borkipreiz]

En effet, on peut évidemment mettre this à la place de document.get....

Pour mon problème principal, la raison était que la fonction $(document).ready (function) n'englobait pas les événements liés à l'attribut class="z".

Merci encore.