Question

我正在创建一个表单，允许用户动态添加其他内容。表格的结构使得表格数据有三个维度，即，像电影可以在不同的剧院播放，并且每个剧院可以具有不同的表演时间。因此，该表格有祖父母，父母和子女的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>

JSFiddle：http://jsfiddle.net/u2vUT/

我可以很好地创建父节点，我甚至可以在第一级创建父节点的子节点 - 当尝试添加动态添加父节点的子节点时会出现问题。这可能是因为'addChild'按钮不再是唯一的，因此$('#addChild').on('click')无法引用它。那么，有没有办法使这项工作（最好是优雅！）？

Answer 1

你不应该使用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>

然后

$(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);
    });
});

演示：Fiddle

嵌套动态添加的内容

1 个答案: