javascript - 如何获取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 的对象。但是，当尝试将

绑定(bind)到点击时，我似乎没有发生任何事情:

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

需要明确的是，在执行上述操作之后，当我点击

时没有任何反应

我有什么遗漏的吗？我对 jQuery 相当陌生……我可以在 $() 中放置一个包含 [object object] 的变量吗？如果没有，我该怎么做？

Answer 1

您需要使用 .find() 在这里，像这样:

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

.children() 只查看直接 child ，<li>位于<ul>下方不过，所以它不是一个直系 child 。

---

请注意，如果您打算在一个页面上拥有多个实例(我猜这很可能是这种情况)，您应该使用类(ID 必须是唯一的)，然后使用类选择器，例如示例:$(self.toolbar).find("li.insert_bold") .