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

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

...但我猜你有理由将两者分开。