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) stars可以正常工作：它會創建<ul class="colors"></ul>但之后在$.each追加均不起作用。 console.log顯示數據已正確接收。 沒有異常出現，該方法在以后在程序中使用時效果很好。

Answer 1

問題是當找不到元素colorField為空時，append將不起作用。

嘗試這個

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) {

    },
};