Необходимая помощь JQery - выбор элемента dom сразу после его создания

Question

Почему эта часть кода не работает в Chrome 4.0, но работает на FF 3.5. Возникает проблема: селектор $ ('li # node -' + nodes [i] .id + ''). Функция append не работает в chrome, но отлично работает в firefox. Есть ли проблема с добавлением элементов DOM, которые были созданы во время выполнения в Chrome? Должен ли я использовать 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 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{ 
         ... 
         ... 
        }