Wie erhalte ich Kinderelemente eines html-Elements?

Question

Ich habe eine var in meinem JS benutzerdefinierte Objekt (Code unten ist von innerhalb der Klasse) gespeichert:

var toolbar;

this.create_toolbar = function() {
    self.toolbar = document.createElement('div');
    $(self.toolbar)
        .html('<ul>' +
            '<li id="insert_bold"></li>' +
            '<li id="insert_em"></li>' +
            '<li id="insert_hyperlink"></li>' +
            '<li id="insert_code"></li>' +
            '<li id="insert_image"></li>' +
            '</ul>')
        .insertBefore(self.editTextarea); // just a textarea on the page
}

The toolbar gets created and placed successfully, and self.toolbar now holds the object for the new div. However, when trying to bind the <li>'s to clicks I can't seem to get anything to happen:

$(self.toolbar).children("li#insert_bold").click(function() {
    alert("just checking");
});

Um das klarzustellen: Nach dem obigen Beispiel passiert nichts, wenn ich auf <li id="insert_bold"> klicke.

Gibt es etwas, das ich übersehe? Ich bin ziemlich neu in jQuery....kann ich eine Variable, die ein [Objekt-Objekt] in der $() hält setzen? Wenn nicht, wie sollte ich dies tun?

Answer 1

Sie müssen Folgendes verwenden .find() hier, etwa so:

$(self.toolbar).find("li#insert_bold").click(function() {
  alert("just checking");
});

.children() schaut nur auf sofort Kinder, <li> liegt unter dem <ul> Es ist also kein unmittelbares Kind.

---

Seien Sie sich jedoch bewusst, wenn Sie beabsichtigen, mehrere Instanzen davon auf einer Seite zu haben (ich vermute, dass dies wahrscheinlich der Fall ist), sollten Sie stattdessen Klassen verwenden (IDs müssen eindeutig sein), dann verwenden Sie einen Klassenselektor, zum Beispiel: $(self.toolbar).find("li.insert_bold") .

Answer 2

Obwohl Nick Ihre Frage gelöst hat, halte ich dies nicht für eine gute Idee, insbesondere wenn Sie eine große Anzahl von HTML-Elementen binden müssen.

Wenn ich eine eher kleine Anzahl habe, sammle ich die Elemente in einem Objekt innerhalb der Hauptkonstruktorfunktion

this.el = {
$button : $('.button','#div'),
$submit : $('.submit','#div')
};

Wenn ich dann ein Element benötige, rufe ich es einfach mit (this) auf, vorausgesetzt, Sie verwenden Prototyp-Funktionen.

this.el.$button.click(function () {

});

Wenn Sie viele Elemente zu behandeln, 20 oder mehr, werde ich empfehlen, dass Sie für ein JavaScript FrameWork entscheiden. Backbone Js ist ein gutes Beispiel.