如何获取html元素的子元素

Question

我在我的JS自定义对象中保存了一个var(下面的代码来自类内部):

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
}

工具栏被创建并成功放置,self.toolbar现在保存新div的对象.但是,当尝试将<li>绑定到点击时,我似乎无法发生任何事情:

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

为了清楚起见,在上面之后,当我点击<li id ="insert_bold">时,没有任何事情发生

有什么东西我错过了吗？我是jQuery的新手....我允许在$()中放置一个包含[object object]的变量吗？如果没有,我该怎么做？

Answer 1

你需要在.find()这里使用,像这样:

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

.children()只看到直接的孩子,<li>在那个下面<ul>,所以它不是直接的孩子.

但是要注意,如果你打算在页面上有多个这样的实例(我猜这可能是这种情况),你应该使用类(ID需要是唯一的),然后使用类选择器,例如:$(self.toolbar).find("li.insert_bold").