L'HTML aggiunto che contiene javascript non viene eseguito, come posso eseguirlo?

Question

Sto aggiungendo alcuni HTML contenenti javascript.

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

e

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

Questi due pezzi di codice sono nella grande quantità di codice HTML che sto aggiungendo.

Funzionano bene se sono già presenti quando la pagina viene caricata ma non quando sto aggiungendo.

Cosa mi consigliate di fare? È necessaria una richiesta di ordinamento per il DOM per reinterpretare il codice JavaScript dopo l'aggiunta o?

EDIT:

Basta un po 'di informazioni, sto con questo problema, perché io sono l'aggiunta di alcune cose con AJAX per il database, e in caso di successo che sto aggiungendo il codice HTML a dove deve essere . Somiglia allo stesso modo in cui lo faccio con i commenti.

Edit2:

Anche con tutta la discussione su di esso, grazie per le risposte, ha ottenuto che funziona.

Answer 1

lo farei in questo modo:

Prima aggiungere attributi id al vostro HTML:

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

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

Poi javascript che viene eseguito sul evento onload della pagina e si attacca agli eventi si' interessato a

In PrototypeJS, potrebbe apparire come questo:

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 
    } 
    } 
}); 

Utilizzando qualcosa come prototipo (o jQuery) è bello perché si prende cura di compatibilità cross-browser.

Answer 2

Aggiungere l'HTML al documento quindi aggiungere l'evento onclick all'oggetto in modo programmatico.

Questa è la parte superiore della mia testa, ma ... penso che si può fare in questo modo:

IE:

Object.onclick = someFuntion 

FF:

Object.addEventListener('click', someFunction); 

Answer 3

È dovrebbe utilizza addEventListener('click', /*...*/) invece di impostare onclick in innerHTML o altro.

IE chiama addEventListener qualcos'altro interamente, quindi dovrete compensare anche quello.

(Edit: IE chiama attachEvent() Spero che questo sia di qualche utilità..)

Answer 4

Si sta aggiungendo il codice HTML tramite la tecnologia AJAX? Se è così, dovrai evalare manualmente() il codice JavaScript che stai restituendo. Si potrebbe avvolgere la risposta in un div e fare qualcosa del genere: metodo di

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

Se si utilizza una libreria come prototipo che sarebbe stato molto più semplice, come si può passare la risposta ai evalScripts().

Answer 5

AJAX ha alcune stranezze ... specialmente con IE. Esempio: non puoi usare la proprietà innerHTML per inserire/aggiornare nulla in un elemento table (in IE). È preferibile utilizzare le funzioni DOM per inserire/aggiornare/eliminare nodi elemento (o aggiungere gestori di eventi). Puoi usare la funzione eval() menzionata per eseguire javascript caricato in modo dinamico che modifica il documento usando gli oggetti DOM.