我有以下任务:
动态创建一个带按钮的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>');
});
});
点击第一个按钮即可,但下次点击新创建的按钮时无效。
答案 0 :(得分:1)
尝试使用on()
..
$(document).on('click','.cua',function(e){
var father = $(this).parent();
var id_new=father.attr('id')+'.M-';
var number=0;
.....
});
答案 1 :(得分:0)
<强>标记
<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());
});