L'HTML aggiunto che contiene JavaScript non funziona, come posso farlo funzionare?

Question

Sto aggiungendo del codice HTML contenente javascript.

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

e

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

Queste due parti di codice sono nella grande quantità di HTML che sto aggiungendo.

Funzionano bene se sono già lì 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 JavaScript dopo l'appendice o?

EDIT:

Solo qualche informazione in più, sono con questo problema, perché sto aggiungendo alcune cose con AJAX al database e, in caso di successo, sto aggiungendo l'html a dove deve essere. Un po 'come fa SO con i commenti.

Edit2:

Anche con tutte le discussioni a riguardo, grazie per le risposte, ha funzionato.

Answer 1

Lo farei così:

Per prima cosa aggiungi gli attributi id al tuo html:

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

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

Quindi avere Javascript che viene eseguito sull'evento onload della pagina e si collega agli eventi che ti interessano.

In PrototypeJS , potrebbe apparire così:

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

L'uso di qualcosa come Prototype (o jQuery) è utile perché si occupa della compatibilità tra browser.

Answer 2

Stai aggiungendo l'HTML tramite AJAX? In tal caso dovrai valutare manualmente () il JavaScript che stai restituendo. Puoi racchiudere la risposta in un div e fare qualcosa del genere:

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

Se si utilizza una libreria come prototipo, sarebbe molto più semplice in quanto è possibile passare la risposta al metodo evalScripts ().

Answer 3

Aggiungi l'HTML al documento, quindi aggiungi programmaticamente l'evento onclick all'oggetto.

Questo è fuori di testa ma ... penso che tu possa farlo in questo modo:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX ha alcune stranezze ... specialmente con IE. Esempio: non è possibile utilizzare la proprietà innerHTML per inserire / aggiornare qualcosa in un elemento di tabella (in IE). È meglio utilizzare le funzioni DOM per inserire / aggiornare / eliminare i nodi elemento (o aggiungere gestori di eventi). Puoi usare la funzione eval () menzionata per eseguire javascript caricato dinamicamente che modifica il documento usando oggetti DOM.

Answer 5

dovresti utilizzare addEventListener ('click', /*...*/) invece di impostare onclick in innerHTML o altro.

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

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