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

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