Question

为什么这段代码不适用于Chrome 4.0，但适用于FF 3.5。发生的问题是选择器$（'li＃node - '+ nodes [i] .id +''）。append函数在chrome中不起作用但在firefox中工作正常。附加到Chrome中运行时创建的DOM元素是否有问题？我应该使用Jquery.live（）？

   $.getJSON("/data/all" , function(data){
                    nodes = data;
                    len = nodes.length;
    for(i=0; i<len; i++){
                        if(i==0){
                           // works on FF && Chrome
                           $('ul#root').append('<li id="node-'+ nodes[i].id +'"><input type="checkbox" name="">'+ nodes[i].name); 

                           // works on FF only
                          $('li#node-'+nodes[i].id +'').append('<ul id="' + nodes[i].id +'>'); 

                        }
                         else{
                           ...   
                           ... 
                        }

Answer 1

您的HTML无效，Chrome也不接受。 Firefox在允许的范围内更为宽松。每当由于动态值而导致大量引用开始和关闭时，最好在jQuery中使用对象样式元素创建，而不是在字符串中完成所有操作。问题出在这一行：

$('li#node-'+nodes[i].id +'').append('<ul id="' + nodes[i].id +'>');

它产生的输出ul是（注意缺少的引用）：

<ul id="1>

要创建复杂的选择器，最好使用字符串替换：

var li = "li#node-{id}".replace("{id}", nodes[i].id);

要使用动态属性创建元素，请使用对象进行初始化：

var ul = $('<ul>', {
    id: nodes[i].id
});

下面的代码虽然有点冗长，但可能有点慢，但很难出错，特别是在像JavaScript这样的语言中，缺少的引用会像我们刚刚目睹的那样造成严重破坏。

var li = "li#node-{id}".replace("{id}", nodes[i].id);
var ul = $('<ul>', {
        id: nodes[i].id
    });
$(li).append(ul);

Answer 2

在插入之前考虑将节点创建为元素，因为您有一个对它的引用，并且可以跳过稍后的查找。类似的东西：

$.getJSON("/data/all" , function(data){
                nodes = data;
                len = nodes.length;
for(i=0; i<len; i++){
                    if(i==0){
                       // works on FF && Chrome
                       var newNode = $('<li id="node-'+ nodes[i].id +'"><input type="checkbox" name="">'+ nodes[i].name);
                       $('ul#root').append(newNode); 

                       // works on FF only
                      newNode.append('<ul id="' + nodes[i].id +'>'); 

                    }
                     else{
                       ...   
                       ... 
                    }

需要Jquery帮助 - 在创建后立即选择dom元素

2 个答案: