Javascript 嵌套动态添加的内容

我正在创建一个表单，允许用户动态添加其他内容。表单的结构是这样的，表单数据有三个维度，即，像电影一样，可以在不同的影院播放，每个影院可以有不同的放映时间。因此，表单中有祖父母、父和子div，按下按钮即可添加父和子div

为了清晰起见，这里有一个精简版的代码

<div id="grandparent">
    <div id="parent">
        Parent 1
        <div id="child">
            Child 1
        </div>       
    </div>
    <button id="addChild">Add Child</button>
</div>
<button id="addParent">Add Parent</button>

<script>
$(function() {
var grandparent_div = $('#grandparent');
    var parent_div = $('#parent');
    var child_div = $('#child');
    var p = $('#grandparent div#parent').size() + 1;
    var c = $('#parent div#child').size() + 1;
    $('#addChild').on('click', function() {
        $('<div id="child">Child '+c+'</div>').appendTo(parent_div);
    });
    $('#addParent').on('click', function() {
        $('<div id="parent">Parent '+p+'<div id="child">Child 1</div><button id="addChild">Add Child</button></div>').appendTo(grandparent_div);
    });
});
</script>

父1
儿童1
添加子项
添加父项
$（函数（）{
var祖父母_div=$（“#祖父母”）；
var parent_div=$（“#parent”）；
var child_div=$（'child'）；
var p=$（'祖父母分部'）.size（）+1；
var c=$（“#父分区#子分区”）.size（）+1；
$（'#addChild'）。在（'click'，function（）上{
$（'Child'+c+''）。附于（父/母部门）；
});
$（'#addParent'）。在（'click'，function（）上{
$（‘父母’+p+‘子女1添加子女’）。附录（祖父母分区）；
});
});

请点击此处：

---

我可以很好地创建父节点，甚至可以在第一级创建父节点的子节点——当尝试添加动态添加的父节点的子节点时，问题就出现了。这可能是因为“addChild”按钮不再是唯一的，因此（'click'）无法引用它。那么，有没有一种方法可以让它工作（最好是优雅的！）？

您不应该使用id，而应该使用class

<div id="grandparent">
    <div class="parent">Parent 1
        <div class="child">Child 1</div>
    </div>
    <button class="addChild">Add Child</button>
</div>
<button id="addParent">Add Parent</button>

父1
儿童1
添加子项
添加父项

然后

$（函数（）{
var祖父母_div=$（“#祖父母”）；
var parent_div=$（'.parent'）；
var child_div=$（'.child'）；
var p=祖父母_div.find（'.parent'）.size（）+1；
祖父母分区on（'click'，'addChild'，函数（）{
$（'Child'+（$（this.sibbines（）.length+1）+'.insertBefore（this）；
});
$（'#addParent'）。在（'click'，函数（）{
$（“父母”+p+“子女1添加子女”）。附录（祖父母分区）；
});
});

---

演示：

使用类和事件委派：。ID必须唯一；这是你的问题，嗨！我面临着一个类似的问题，一个孩子可以添加多个自己的孩子，而每个孩子都可以添加自己的孩子。我已经分叉了您的JSFIDLE并做了一些更改，这是我最初的JSFIDLE（）。在这方面你能帮我吗？先谢谢你

$(function () {
    var grandparent_div = $('#grandparent');
    var parent_div = $('.parent');
    var child_div = $('.child');
    var p = grandparent_div.find('.parent').size() + 1;

    grandparent_div.on('click', '.addChild', function () {
        $('<div id="child">Child ' + ($(this).siblings().length + 1) + '</div>').insertBefore(this);
    });
    $('#addParent').on('click', function () {
        $('<div class="parent">Parent ' + p + '<div class="child">Child 1</div><button class="addChild">Add Child</button></div>').appendTo(grandparent_div);
    });
});