Le code HTML en annexe qui contient 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 j'annexant.

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? Est-il besoin d'une demande de tri pour le DOM pour ré-interpréter le JavaScript après l'append ou?

EDIT:

Juste un peu plus d'info, je suis avec ce problème, parce que je suis d'ajouter des choses avec AJAX à la base de données, et le succès que je suis annexant le code html à l'endroit où il doit être . Kinda de la même manière SO fait avec les commentaires.

Edit2:

Même avec toute la discussion à ce sujet, merci pour les réponses, il a obtenu de travail.

Answer 1

Je ferais comme ça:

d'abord ajouter attributs id à votre html:

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

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

ont ensuite Javascript qui fonctionne sur l'événement onload de la page et attache aux événements que vous » Je suis intéressé par.

En PrototypeJS, il 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 
    } 
    } 
}); 

En utilisant quelque chose comme Prototype (ou jQuery) est agréable car il prend soin de compatibilité inter-navigateur. AJAX a quelques bizarreries ... particulièrement avec IE.

Answer 2

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

C'est du haut de ma tête, mais ... Je pense que vous pouvez le faire de cette façon:

IE:

Object.onclick = someFuntion 

FF:

Object.addEventListener('click', someFunction); 

Answer 3

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

IE appelle addEventListener quelque chose d'autre entièrement, donc vous devrez compenser cela aussi.

(Edit: IE appelle attachEvent() Espérons que cela est d'une certaine utilité..)

Answer 4

Êtes-vous apposent le HTML via AJAX? Si c'est le cas, vous devrez eval() manuellement le JavaScript que vous retournez. Vous pouvez envelopper la réponse dans un div et faire quelque chose comme ceci: méthode

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

Si vous utilisez une bibliothèque comme prototype, il serait beaucoup plus simple que vous pouvez transmettre la réponse aux evalScripts().

Answer 5

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 javascript chargé dynamiquement qui modifie le document en utilisant des objets DOM.