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的对象。但是，当尝试将＆lt; li＆gt;绑定到点击时，我似乎无法发生任何事情：

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

要明确的是，在上述之后，当我点击＆lt; li id =“insert_bold”＆gt;

时，什么也没发生

我有什么遗失的东西吗？我是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")。

Answer 2

虽然尼克解决了你的问题，但我认为这不是一个好主意，特别是如果你有大量的HTML元素绑定。

当我有一个相当小的数字时，我会收集主构造函数

中的对象中的项目

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

然后当我需要一个元素时，我只是用（this）调用它，假设你正在使用原型函数。

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

});

如果要处理的元素很多，20个或更多，我建议您选择JavaScript FrameWork。 Backbone Js是一个很好的。

如何获取html元素的子元素

2 个答案: