嵌套動態添加內容

Question

我正在創建一個允許用戶隨時添加其他內容的表單。該表格的結構使得表格數據有三個維度，即像電影可以在不同的劇院中演奏，並且每個劇院可以具有不同的放映時間。因此，該表單具有祖父母，父母和子女的div，並且父母可以在按下按鈕時添加子div。

下面的代碼中爲了清楚而以slimed下來的版本在這裏

<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，使用類

<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