Question

我知道如果我想将事件绑定到生成的HTML，我需要使用类似.on()的内容，但我只在绑定.click().

之类的事件时才使用它

我正在创建一个应用颜色列表的网络应用。颜色是从JSON文件生成的。获取后，我将其添加到页面中，其中包含属性中的某些信息。我想用新生成的HTML做一些事情，即list-elements。但console.log()向我展示的是父ul中没有任何内容。即使在页面上我看到了新添加的内容。

以下是基于它的整个代码。

var setColors = function(){

    getColors = function(){
        $.getJSON('js/colors.json', function(colors) {
                $.each(colors, function(i, colors) {
                //console.log(colors);
                    $('<li>', {
                        text: colors['color'],
                        'name' : colors['color'],
                        'data-hex' : colors['hex'],
                        'data-var' : colors['var']
                    }).appendTo('#picker');
                })
        });

        addColors();
    }

    addColors = function(){
        var el = $('#picker').children;
        $(el).each(function(){
            console.log($(this));
        });
    }

    return getColors();
}


$(function(){

    setColors();

});

addColors（）是我遇到麻烦的地方。错误显示'未捕获TypeError: Cannot read property 'firstChild'为null。如何使用新生成的HTML？

Answer 1

您在子方法上缺少括号：

var el = $('#picker').children();

另外，如果你想在新生成的html上执行addColor方法，那么你必须在生成html后从getJSON回调方法中添加一个调用。

Answer 2

addColors = function(){
    var el = $('#picker').children;
    $(el).each(function(){
        console.log($(this));
    });
}

一些问题：

缺少结束半色
在.children()
children（）返回一个jQuery对象，不需要$(el)

更新：

window.addColors = function(){
    var $el = $('#picker').children();
    $el.each(function(){
        // do stuff here, but could attach each() to above, after children()
    });
};

使用jQuery循环生成HTML

2 个答案: