JQuery append（）在第一次调用时没有工作

Question

这里是使用方法

的代码

var view = {
drawColorBoxes: function (colors) {
    var colorField = $('.colors');

    if (colorField.length <= 0) {
        $('.thumbnails').after('<ul class="colors"></ul>');
    }
    $.each(colors, function (color) {
        console.log(color);
        colorField.append('<li class="colorbox"></li>');
    });
},

    markSelected: function (color_id) {

    },
};

加载页面后，方法drawColorBoxes(colors)明星正常工作：它会创建<ul class="colors"></ul>，但之后会在$.each创建 追加无效。console.log显示数据已正确收到。没有异常出现，该方法在以后的程序中使用时工作正常。

Answer 1

问题是当找不到元素时colorField为空，因此追加将无效。

试试这个

var view = {
drawColorBoxes: function (colors) {
    var colorField = $('.colors');

    if (colorField.length <= 0) {
        $('.thumbnails').after('<ul class="colors"></ul>');
        colorField = $('.colors'); // You need to reassign/initialize colorField.
    }
    $.each(colors, function (color) {
        console.log(color);
        colorField.append('<li class="colorbox"></li>');
    });
},

    markSelected: function (color_id) {

    },
};