Bonjour,

J'ai une page web, qui peut déclencher une requête Ajax.
Cette requête Ajax renvoie du code HTML, qui devient l'innerHTML d'une DIV.
Dans ce code renvoyé par l'Ajax, il y a des boutons, auxquels je souhaite associer des événements.
Je vais chercher les boutons par un
Code : Sélectionner tout - Visualiser dans une fenêtre à part
querySelector(identifiantCss);
Jusque là, ça marche. Par exemple, lorsque je demande à la console.log d'afficher le bouton.value, il me rend bien le texte du bouton en console.

Là où ça ne va plus, c'est lorsque j'ajoute un événement à mon bouton.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
monBouton.addEventListener('click', actionBouton);
Pourtant, la procédure-cible est bien visée. Si je la renomme, pour qu'elle ne corresponde plus à la fonction invoquée, je vois une erreur en console.
Mais quand je clique sur le bouton, rien ne se passe.

Voici la procédure invoquée comme event handler :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
actionImporteTousParag = function(e)
 {
  console.log('Importer tous les paragraphes du modèle ');
 },
Voici la procédure qui reçoit la requête Ajax :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 actionXhrModele = function(e)
 {
  if(e.target.readyState == 4)
  {
   if(e.target.status == 200)
   {
    divImport.innerHTML = e.target.responseText;
    leBoutonTousParag = document.querySelector('article#artiImport div.scrollable input[type=button]#tous');
    leBoutonTousParag.addEventListener('click', actionImporteTousParag);
    console.log(leBoutonTousParag.value); // OK, il affiche "Tous"
   }
   else
   {
    divImport.innerHTML = '<P style="text-align:center;background-color:rgba(255, 0, 0, 0.6);">Echec requ&ecirc;te ajax</P>';
   }
   divImport.innerHTML += '<P style="text-align:center;">' + (Date.now() - delai) + ' ms</P>';
  }
 },
Cette procédure en réponse à une requête Ajax (onreadystatechange) ne pose aucun problème, elle est bien appelée et exécutée.
Elle donne un contenu à la DivImport

leBoutonTousParag a bien été récupéré par le
Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.querySelector('article#artiImport div.scrollable input[type=button]#tous');
Puisqu'à la ligne suivante, le console.log affiche bien sa Value en console (le texte sur le bouton est 'Tous', je le retrouve bien en console.)

Cependant, lorsque je le clique, rien n'est déclenché.
Je doute qu'il ait associé la fonction à l'événement.
Dubitatif, je renomme la fonction en "actionImporteTousParag2" (mais pas dans le paramètre de addEventListener) et ça déclenche une erreur, comme dit plus haut, puisqu'il ne trouve plus la fonction événementielle.
Donc, c'est qu'il l'associait bien au bouton.

J'essaie avec d'autres événements que click : blur, mouseenter, focus, ...
Rien n'y fait, le bouton reste sourd.

Pourtant, j'ai la certitude :
  • Que le bouton existe (Je le vois)
  • Qu'il est récupéré par le QuerySelector, puisqu'il affiche sa 'Value' en console.
  • Qu'un événement y est bien associé, puisque si je change le nom de la fonction associée, une erreur a lieu.


A mon avis, ça doit être une question de propagation par bouillonnement ou capture.
J'ai essayé d'ajouter un troisième paramètre à mon addEventListener. false ou true n'y change rien.

Quelqu'un saurait-il m'expliquer comment associer un événement à un bouton importé, après coup, dans une page web, par une requête ajax ?

Merci,
Christian.