[Erledigt] jQuery's ON keine Funktion

[oelgemeyer]

Hey Leute,

ich habe mal wieder ein Problem mit jQuery. Und zwar wird eine Seite mit einer Tabelle dynamisch geladen und in dieser Tabelle ist in einer Spalte ein span element. Ich will das span anklicken können und habe es so wie sonst auch, so gemacht:

$("div#content #articles tr td").on("click", "span", function() {
    console.log("hey");
});

Es will aber einfach nicht feuern. Wieso nicht? Dafür ist "on" doch da? Und vor allem hat es sonst auch funktioniert. Wenn ich den code direkt in die dynamisch geladenene seite schreibe funktioniert es auch aber so möchte ich es nicht machen.

Irgendwelche Ideen?

[monolith]

Lass dir in der Console mal anzeigen:

$("div#content #articles tr td span")

Vielleicht wird das span nicht gefunden?

Übrigens sollte $("div#content #articles tr td span") die gleichen Elemente finden wie $("#articles td span").
Warum?
- IDs sollen einzigartig sein, d. h. es gibt darf nur ein Element mit der ID 'articles' geben - man muss also vorher gar nicht filtern
- ein td ist immer in einem tr

=> $("#articles td").on("click", "span",...

[tkausl]

Und zwar wird eine Seite mit einer Tabelle dynamisch geladen

Alles was noch nicht existiert und erst später dynamisch dazu kommt darf nicht im $() stehen sondern im on() als zweiter Parameter.

[nikosch]

Es ist aussderdem nicht nötig, jede einzelne Verschachtelungsstufe aufzuzählen. span können ja nur in td/th stehen.

[oelgemeyer]

Vielen Dank für eure Antworten. Ich hatte das so ausführlich geschrieben also die Verschachtelung weil ich dachte das es vielleicht sonst nicht gefunden wird.

Vielen Dank an tklausl! Jetzt weiß ich das auch endlich mal! Es funktioniert jetzt. Es ist ja auch irgendwie logisch. ^^ Vielen Dank!

[oelgemeyer]

Achso ich wollte noch fragen:
Ist diese Version mit on click schneller als mit on DOMSubtreeModified?

[nikosch]

Das ist was ganz anderes.

[oelgemeyer]

Mag sein aber mit beiden kann ich Dinge behandeln die dynamisch geladen werden. In meinem Fall entweder
$("#content").on("click", "table#articles span", function() { });

oder

$("#content").on("DOMSubtreeModified", function() {});

beides funktioniert. Mir gefällt die Version mit DOMSu.. ganz gut weil ich das einfach um alle meine Funktionen die Objekte behandeln die in der Zukunft geladen werden schreiben kann.

Die Frage ist nur, weil ich das mal irgendwo gelesen habe, ob DOMSu.. zu performencelastig ist?
Vielleicht ist es auch einfach nicht richtig, laut irgendwelchen Regeln oder ähnliches. Dann würde ich natürlich lieber die "richtige" Variante nutzen.

[nikosch]

Mag sein aber mit beiden kann ich Dinge behandeln die dynamisch geladen werden.

Das eine ist ein Klick, das andere ein DOM-Change. Nur weil ein Fahrrad auf der Strasse fährt, ist es noch kein Auto.

Mir gefällt die Version mit DOMSu.. ganz gut weil ich das einfach um alle meine Funktionen die Objekte behandeln die in der Zukunft geladen werden schreiben kann.

Das ist einfach nur dämlich, weil Du damit jedesmal neue Eventhandler schaffst. Vielleicht sogar dopelte auf einem DOM-Node, der sich gar nicht geändert hat.

Event Delegation erzeugt dagegen ein (1!) einziges Event. „Aufwand“ entsteht erst, wenn das Event gefeuert wird.

[oelgemeyer]

Ich weiß das es zwei unterschiedliche Dinge sind. Das habe ich bereits gesagt. Und schön das ich dämlich bin, danke dafür. Der letzte Teil nach dem dämlich hätte gereicht. Trotzdem danke.