Le HTML ajouté qui contient du javascript ne fonctionne pas, comment puis-je le faire fonctionner?

Question

J'ajoute du code HTML contenant du javascript.

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

et

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

Ces deux morceaux de code sont dans la grande quantité de HTML que j'ajoute.

Ils fonctionnent correctement s'ils sont déjà présents lors du chargement de la page, mais pas lors de l'ajout.

Que me suggérez-vous de faire? Une demande de tri est-elle nécessaire pour que le DOM réinterprète le code JavaScript après l’ajout ou?

EDIT:

Juste quelques informations supplémentaires, je suis avec ce problème, parce que j'ajoute des éléments avec AJAX à la base de données, et en cas de succès, j'ajoute le code HTML à l'endroit où il doit être. Un peu comme SO fait avec les commentaires.

Modifier2:

Même avec toutes les discussions à ce sujet, merci pour les réponses, ça a fonctionné.

Answer 1

Je le ferais comme ça:

Ajoutez d’abord les attributs d’identification à votre code HTML:

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

Ensuite, ayez du Javascript qui s'exécute sur l'événement onload de la page et qui se rattache aux événements qui vous intéressent.

Dans PrototypeJS , cela pourrait ressembler à ceci:

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

Utiliser quelque chose comme Prototype (ou jQuery) est bien, car il gère la compatibilité entre navigateurs.

Answer 2

Ajoutez-vous le code HTML via AJAX? Dans ce cas, vous devrez manuellement évaluer () le code JavaScript que vous retournez. Vous pouvez envelopper la réponse dans une div et faire quelque chose comme ceci:

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

Si vous utilisez une bibliothèque comme prototype, ce serait beaucoup plus simple, car vous pouvez transmettre la réponse à la méthode evalScripts ().

Answer 3

Ajoutez le code HTML au document, puis ajoutez par programme l’événement onclick à l’objet.

C’est une idée en tête mais ... je pense que vous pouvez le faire de cette façon:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX a quelques bizarreries ... surtout avec IE. Exemple: vous ne pouvez pas utiliser la propriété innerHTML pour insérer / mettre à jour quoi que ce soit dans un élément de table (dans IE). Il est préférable d’utiliser les fonctions DOM pour insérer / mettre à jour / supprimer des nœuds d’éléments (ou ajouter des gestionnaires d’événements). Vous pouvez utiliser la fonction eval () mentionnée pour exécuter du javascript chargé de manière dynamique qui modifie le document à l'aide d'objets DOM.

Answer 5

Vous devriez utiliser addEventListener ('cliquez', /*...*/) au lieu de définir onclick dans innerHTML ou autre.

IE appelle addEventListener complètement autre chose, vous devrez donc compenser cela aussi.

(Edit: IE l'appelle attachEvent () . J'espère que cela sera utile.)