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元素

回答

相關問題