javascript - 在 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());

});

小提琴