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

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

$.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{ 
          ... 
          ... 
         }

来源

2010-08-30 papdel

Chrome JS运行速度快吗？ – Frankie 2010-08-30 23:35:17

你在这里看到同样的问题http://jsbin.com/elozi5/2/edit？这个简化的例子适用于所有浏览器？ – Daveo 2010-08-31 00:28:09

@Daveo - 是的简化示例适用于所有浏览器。但是，当我引入数组节点[]时，它停止工作。节点[]具有以下结构节点= {[ID，姓名，PARENT_ID，PARENT_NAME}，{..}，...] 我已经贴上我的代码在这里http://jsbin.com/ifayu3 /编辑。看看，我试图创建一个快速和脏的复选框层次结构。谢谢。 – papdel 2010-08-31 00:54:28

您的HTML无效，并且Chrome不接受它。 Firefox允许它更宽大。无论何时由于动态值而导致大量的引用开放和关闭，最好在jQuery中使用对象样式元素创建，而不是在字符串中完成。问题是这一行：

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

U1的输出它产生的是（注意缺少引号）：

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

来源

2010-08-30 23:47:38 Anurag

我明白，我可以与一个参考工作，但我仍然不知道为什么铬不会工作，而FF显然是忽略任何问题。我更加渴望了解背后的原因。 – papdel 2010-08-31 00:14:33

@papdel - 这就是精神。你能在http://jsfiddle.net上发布一个可重现的例子吗？ – Anurag 2010-08-31 00:28:13

加入原始问题的评论（jsbin.com/ifayu3/edit） – papdel 2010-08-31 00:55:06

考虑插入之前创建节点作为元素，如那么你必须对它的引用，并且可以跳过以后查找。例如：

$.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{ 
         ... 
         ... 
        }

来源

2010-08-30 23:44:43

这个问题仍然存在于浏览器。看到上面的评论 – papdel 2010-08-31 01:23:18

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

回答

相关问题