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

Question

Почему этот фрагмент кода не работает на Chrome 4.0, но работает на FF 3.5.Возникает проблема с селектором $ ('li # node -' + node [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, который он производит (обратите внимание на отсутствующую цитату):

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