Ein mit Javascript erstelltes Objekt mit Javascript ansprechen

[umlaut]

Hallo,

ich habe folgendes Problem und würde mich freuen zumindest einen Tipp zu bekommen, ob man das so oder über anderen Weg lösen kann.

Ich habe mit jQuery ein neues DIV-Element erstellt und diesem auch gleich eine Beschriftung und eine eigene ID zugewiesen.

$('#bestehendesdiv').append('<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>');

Mein Problem ist nur, dass ich dieses Element auch direkt weiterverwenden möchte, d.h. mit einem onlick-Event auf die Klasse aus dem Beispiel „meineclass“ eine andere Funktion auslösen. Bei Elementen die bereits existieren klappt das onclick-Event wunderbar - beim im Dokument neu erstellten nicht.

Nun scheint das wohl nur bei Dingen zu funktionieren, die bereits beim Laden der Seite und nicht nachträglich dazu generiert wurden.
Stand jemand schonmal vor dem gleichen Problem und kann mir vielleicht bitte weiterhelfen wie ich diese neuen Elemente trotzdem nutzen kann ohne die Seite neuzuladen?

Lieben Gruß

[Gunther]

Hallo!

Mein Problem ist nur, dass ich dieses Element auch direkt weiterverwenden möchte, d.h. mit einem onlick-Event auf die Klasse aus dem Beispiel „meineclass“ eine andere Funktion auslösen. Bei Elementen die bereits existieren klappt das onclick-Event wunderbar - beim im Dokument neu erstellten nicht.

Du musst deinen Event Handler mittels .live() zuweisen.

Gruß Gunther

[1UnitedPower]

Meine Herren,

Du musst deinen Event Handler mittels .live() zuweisen.

live ist als deprecated eingestuft und sollte nicht mehr benutzt werden. Stattdessen wird on() empfohlen, in der Notation wie Worf sie vorgeschlagen hat, kann damit Ereignis-Delegation erreicht werden.

Siehe http://api.jquery.com/on/#direct-and-delegated-events für Details.

[Gunther]

Mein Herr!

Du musst deinen Event Handler mittels .live() zuweisen.

live ist als deprecated eingestuft und sollte nicht mehr benutzt werden.

Ja, und wenn der OP meinem Link mal gefolgt wäre, hätte er vermutlich
erstens "sein Problem" erkannt, und
zweitens gelesen, dass .live() deprecated ist und was stattdessen empfohlen wird.

Denn ich vermute mal ganz stark, dass er seinen Event Handler so eingebunden hat, dass er nur für bereits existierende Elemente greift, nicht aber für später hinzugefügte.

Dieser Punkt ist, für mich zumindest, mutmaßlich des "Pudels Kern" der Geschichte ...! ;-)

Gruß Gunther

[Der Martin]

Hi,

Ich habe mit jQuery ein neues DIV-Element erstellt und diesem auch gleich eine Beschriftung und eine eigene ID zugewiesen.

dein Codebeispiel erzeugt ein span- und kein div-Element. Das ändert aber am Prinzip nichts.

$('#bestehendesdiv').append('<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>');

Das sieht an sich korrekt aus. Damit erzeugst du ein neues Kindelement von #bestehendesdiv, das auch noch selber eine ID hat.

Allerdings ist der Code problematisch, wenn er in einem script-Element im Hauptdokument steht und nicht in einer ausgelagerten Javascript-Ressource. Dann ist nämlich beim '</' von '</span' das gesamte script-Element zu Ende, und nachfolgender Code wird nicht mehr ausgeführt.
Wenn die Zeichenfolge '</' innerhalb eines Javascript-Strings auftritt, sollte man daher unbedingt den '/' maskieren, also '</' notieren.

Mein Problem ist nur, dass ich dieses Element auch direkt weiterverwenden möchte, d.h. mit einem onlick-Event auf die Klasse aus dem Beispiel „meineclass“ eine andere Funktion auslösen. Bei Elementen die bereits existieren klappt das onclick-Event wunderbar - beim im Dokument neu erstellten nicht.

Wie versuchst du es denn?

Nun scheint das wohl nur bei Dingen zu funktionieren, die bereits beim Laden der Seite und nicht nachträglich dazu generiert wurden.

Nein, der Theorie nach sollte es auch bei dynamisch generierten Elementen gehen. Daher nochmal: Wie machst du das?

Ciao,
 Martin

[1UnitedPower]

Meine Herren,

Allerdings ist der Code problematisch, wenn er in einem script-Element im Hauptdokument steht und nicht in einer ausgelagerten Javascript-Ressource. Dann ist nämlich beim '</' von '</span' das gesamte script-Element zu Ende, und nachfolgender Code wird nicht mehr ausgeführt.
Wenn die Zeichenfolge '</' innerhalb eines Javascript-Strings auftritt, sollte man daher unbedingt den '/' maskieren, also '</' notieren.

Ich glaube du verwechselst irgendwas, ich kann dir aber auch nicht sagen was.

[1UnitedPower]

Meine Herren,

Ich glaube du verwechselst irgendwas, ich kann dir aber auch nicht sagen was.

Ich nehms zurück, Felix' Post hat mich erleuchtet, worum es hier geht.

[Felix Riesterer]

Lieber Martin,

Allerdings ist der Code problematisch, wenn er in einem script-Element im Hauptdokument steht und nicht in einer ausgelagerten Javascript-Ressource. Dann ist nämlich beim '</' von '</span' das gesamte script-Element zu Ende, und nachfolgender Code wird nicht mehr ausgeführt.

das ist genau dann kein Problem, wenn Du den JS-Code mit <![CDATA[ ... ]]> einrahmst:

<html><head><title>Test</title><script type="text/javascript">~~~javascript //<![CDATA[
    alert("</script>");
//]]>

  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[molily]

Hallo,

das ist genau dann kein Problem, wenn Du den JS-Code mit <![CDATA[ ... ]]> einrahmst

CDATA ist ein reines XML-Feature wirkt sich nur auf XHTML-Dokumente aus, die mit dem MIME-Typ application/xhtml+xml oder application/xml übertragen werden (Dateiendung .xhtml bzw. .xml).

CDATA hat in normalen HTML-Dokumenten (MIME-Type text/html, Dateindung .html) keine Wirkung.

Mathias

[molily]

Hallo,

Allerdings ist der Code problematisch, wenn er in einem script-Element im Hauptdokument steht und nicht in einer ausgelagerten Javascript-Ressource. Dann ist nämlich beim '</' von '</span' das gesamte script-Element zu Ende, und nachfolgender Code wird nicht mehr ausgeführt.

Diese Regel hat für HTML 4 und SGML-Parser gegolten:

http://www.w3.org/TR/REC-html40/types.html#h-6.2
http://www.w3.org/TR/REC-html40/appendix/notes.html#notes-specifying-data

Browser hatten aber nie SGML-konforme Parser und diese Regel wurde m.W. nicht umgesetzt.

Für HTML5-Parser ist m.W. erst beim </script> ist das script-Element zuende. Das kodifizierte die schon vorher gängige Praxis.

http://www.w3.org/TR/html5/syntax.html#script-data-state
http://www.w3.org/TR/html5/syntax.html#script-data-end-tag-open-state
http://www.w3.org/TR/html5/syntax.html#script-data-end-tag-name-state

Entscheidend ist hier
»U+003E GREATER-THAN SIGN (>)
If the current end tag token is an appropriate end tag token, then switch to the data state and emit the current tag token.«

</irgendwas-anderes-als-script> ist kein appropriate end tag token für <script>.

Siehe auch Live DOM Viewer.

Mathias

[Felix Riesterer]

Lieber umlaut,

Ich habe mit jQuery ein neues DIV-Element erstellt [...]
$('#bestehendesdiv').append('<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>');

da Du dem Element eine ID gegeben hast, solltest Du nun mittels $("#meineid-"+id) darauf zugreifen können. Es lohnt sich aber, eine Referenz in einer Variablen abzulegen, anstatt jedesmal diesen jQuery-Aufruf zu bemühen:

var meinSpan = $(  
    '#bestehendesdiv'  
).append(  
    '<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>'  
);

Ich habe allerdings nicht überprüft (bin kein jQuery-Nutzer), ob append() das erzeugte Objekt zurückliefert, oder ob Du folgenden Weg gehen musst:

$(  
    '#bestehendesdiv'  
).append(  
    '<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>'  
);  
var meinSpan = $("#meineid-"+id);

Liebe Grüße,

Felix Riesterer.

[Worf]

Hallo,

Du könntest das neue Objekt in einer Variable speichern, um später darauf Zugriff zu haben (die append()-Methode liefert ein jQuery-Objekt zurück, nicht das angefügte Objekt, daher lässt sich Method Chaining hier nicht verwenden):

var $el = $('<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>');  
$('#bestehendesdiv').append($el);  
$el.on("click", function() { alert("click!"); } );

Eine andere Möglichkeit wäre (u.a.), das click-Event auf dem parent-Element zu registrieren und das gewünschte child-Element mit einem Selektor einzugrenzen:

var id = "neu";  
$('#bestehendesdiv').on("click", ".meineclass", function() { alert("click!"); })  
$('#bestehendesdiv').append('<span id="meineid-'+id+'" class="meineclass">Beschriftung</span>');  

Gruss,
Worf

[umlaut]

Hallo Worf,

ich habe deine zweite Lösungsmöglichkeit genutzt und es funktioniert genau so wie ich es mir vorgestellt habe - vielen Dank.

Danke allen für die Vorschläge und eure Hilfe!

Lieben Gruß