如何在动态插入的元素上动态插入元素？

Question

我希望能够动态追加到动态追加的元素。 如果你有这样的：

<div id="main"> 

</div> 

$(document).ready(function() { 
    $('#main').append('<div id="inner"></div>'); 

    $('#inner').append('<div id="goal"></div>'); 
}); 

#goal永远不会被追加。有没有一个jquery函数来处理这个问题，或者我该怎么做？

http://jsfiddle.net/jmZY4/

Answer 1

把它发挥得淋漓尽致（live copy   — 有在你的榜样的CSS中的错误，顺便说一句，双#main规则和没有#inner规则）：

$(document).ready(function() { 
    var inner = $('<div id="inner"></div>'); 
    inner.appendTo('#main'); 
    inner.append('<div id="goal"></div>'); 
}); 

appendTo与append相反。

您可以编写更紧凑，但（在我看来）这是不值得的清晰度的损失（live copy）：

$(document).ready(function() { 
    $('<div id="inner"></div>') 
     .appendTo('#main') 
     .append('<div id="goal"></div>'); 
}); 

当然，在你的精确例如，你可以只（live copy ）：

$(document).ready(function() { 
    $('#main').append('<div id="inner"><div id="goal"></div></div>'); 
}); 

......但我猜你有两个分开做的理由。

Answer 2

试试这个

$(document).ready(function() { 
    $('<div id="inner"></div>').append('<div id="goal"></div>').appendTo('#main'); 
});