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

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

2 个答案: