Anhängenden HTML-Code, JavaScript nicht ausgeführt enthält, wie kann ich es laufen zu lassen?

Question

Ich anhängen einige HTML mit JavaScript.

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

und

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

Diese beiden Teile des Codes sind in der großen Menge an HTML Ich anhängen.

Sie arbeiten gut, wenn sie schon da ist, wenn die Seite geladen wird, aber nicht, wenn ich angehängt wird.

Was schlagen Sie mir zu tun? Ist es eine Art Anfrage für das DOM benötigt, um die JavaScript nach dem Anfügen neu zu interpretieren oder?

EDIT:

Nur ein paar mehr Informationen, ich bin mit diesem Problem, weil ich ein paar Sachen mit AJAX in die Datenbank bin hinzufügen und auf Erfolg Ich bin Anfügen die html, wo es sein muss. Kinda die gleiche Art und Weise tut dies mit den Kommentaren.

Edit2:

Selbst mit all der Diskussion darüber, danke für die Antworten, hätte es funktioniert.

Answer 1

ich es so tun würde:

Fügen Sie zunächst id-Attribute, um Ihre HTML:

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

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

Dann Javascript haben, die auf dem onload Ereignis der Seite läuft und legt an die Ereignisse, die Sie interessieren.

PrototypeJS , es könnte wie folgt aussehen:

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

Mit so etwas wie Prototype (oder jQuery) ist schön, weil es Pflege von Cross-Browser-Kompatibilität führt.

Answer 2

Anfügen Sie die HTML über AJAX? Wenn dies der Fall müssen Sie manuell eval () das JavaScript, das Sie zurückkommen. Man könnte die Antwort in einem div wickeln und etwas tun, wie folgt aus:

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

Wenn Sie eine Bibliothek wie Prototyp verwenden wäre es viel einfacher sein, wie Sie die Antwort auf die evalScripts passieren können () -Methode.

Answer 3

Fügen Sie die HTML-Dokument dann programmatisch das Onclick-Ereignis für das Objekt hinzuzufügen.

Dies ist aus der Spitze von meinem Kopf, aber ... ich denke, man kann es auf diese Weise tun:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX hat einige Macken ... vor allem mit IE. Beispiel: Sie können nicht die Innerhtml Eigenschaft verwenden, um insert / update alles in einem Tabellenelement (in IE). Es ist besser, die DOM-Funktionen zu verwenden, um insert / update / delete Elementknoten (oder Event-Handler hinzufügen). Sie können die Funktion eval () erwähnt verwenden dynamisch geladen Javascript auszuführen, die das Dokument mit DOM-Objekte modifiziert.

Answer 5

Sie sollte sein addEventListener('click', /*...*/) anstelle Onclick in innerHTML- der Einstellung oder was auch immer.

IE ruft addEventListener etwas ganz anderes, so dass Sie auch dafür kompensieren müssen werden.

(Edit:.. IE nennt es attachEvent() Hoffe, dass dies von Nutzen ist)