在JQuery中創建級聯元素

Question

我有以下任務：

動態創建一個帶有按鈕的div，這又將使他們創建另一個（帶有按鈕的div），依此類推。

但是以下代碼不起作用：

<div id="M-0">
    <div id="M-0C"></div>
    <input id="add_container" name="add_container" class="cua" type="button" value="Addition Container"  >
</div>

jQuery代碼是：

$(document).ready(function() {
    $(".cua").live("click", function(e){
        var father = $(this).parent();          
        var id_new=father.attr('id')+'.M-';
        var number=0;
        while( $('#'+id_new+number).length ){
            number=number+1;
        }
        id_new=id_new+number;
        alert('here '+id_new);
        $('#'+father.attr('id')+'C').append('<div id="'+id_new+'"><div id="'+id_new+'C"></div><input id="add_container" name="add_container" class="cua" type="button" value="Addition Container" ></div>');
    });
});

單擊第一個按鈕有效，但是單擊新創建的按鈕則無效。

Answer 1

嘗試使用on() ..

$(document).on('click','.cua',function(e){
   var father = $(this).parent();          
    var id_new=father.attr('id')+'.M-';
    var number=0;
   .....

});

在這里擺弄

Answer 2

標記

<div id="parent">
  <div class="button"><button>Add More</button></div>
</div>

JS

var $parent = $('#parent');
var $button = $parent.find('.button');

$(document).on('click', '.button button', function(event){

    event.preventDefault();
    $parent.append($button.clone());

});

小提琴