通過生成的HTML與jQuery

我知道，如果我想將事件綁定到生成的HTML循環，我需要使用類似.on()，但我只用它綁定的事件，如.click().通過生成的HTML與jQuery

我當創建一個應用顏色列表的Web應用程序。顏色是從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'爲空。我如何使用新生成的HTML？

來源

2013-03-06 devs

你缺少對孩子的方法括號：

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

另外，如果你想成爲新生成的HTML執行addColor方法，那麼你必須添加一個調用它生成的HTML後，從getJSON回調方法中。

來源

2013-03-06 21:01:26

而console.log（）現在不返回任何東西。 – devs 2013-03-06 21:02:40

Got it！謝謝。 – devs 2013-03-06 21:04:59

是因爲當addColors被調用時沒有任何孩子？請記住，您正在通過ajax附加html，因此執行該方法時新生成的html不存在 – 2013-03-06 21:05:59

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

的幾個問題：

缺少結束半色
上.children()
孩子缺少括號（）返回一個jQuery對象，無需$(el)

更新時間：

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

來源

2013-03-06 21:09:14 vol7ron

通過生成的HTML與jQuery

回答

相關問題