Question

我有以下任务：

动态创建一个带按钮的div，这又可以创建另一个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;
   .....

});

fiddle here

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

});

Fiddle

在JQuery中创建级联元素

2 个答案: