使用jquery追加div多次

Question

http://jsfiddle.net/sF5av/1/

我有

<div id="anettedata">
     <div class="lbl">Annette Name</div><div class="txt"><input type="text" /></div>
     <input type="button" id="mybtn" class="btnAdd" value="Add Another Annette"  />
</div>
<div id="otheranettedata"></div>

当“添加另一个Annette”点击时，我想在div“anettedata”中放置相同的内容。我使用以下jquery

完成了这个

$(document).ready(function () {
    var datatoappend='<div class="otherdata">.........<input type="text" /></div>'
    $('.btnAdd').click(function () {

        $('#otheranettedata').append(datatoappend); // end append        
    });
});

我的问题是，当我再次点击新创建的按钮“添加另一个Annette”时，我想在新创建的div下面放置相同的内容。我怎样才能重写这个jquery和html来解决这个问题，请帮助我。

我还有一个问题，当添加新的div组时，我们如何删除之前的“添加另一个Annette”按钮

Answer 1

使用事件委托。

.on()方法将事件处理程序附加到jQuery对象中当前选定的元素集。

写：

$(document).on('click','.btnAdd',function () {         
    $(document).find('.btnAdd').remove();  
    $('#otheranettedata').append(datatoappend); // end append        
});

Updated fiddle here.

Refer this document.

Answer 2

您需要使用事件委派

$(document).on('click', '.btnAdd', function () {
    $('#otheranettedata').append(datatoappend); // end append        
});

DEMO

Answer 3

使用on()动态添加元素，例如

$(document).on('click','.btnAdd',function () {
    $('#otheranettedata').append(datatoappend); // end append        
});

Demo

已更新以删除之前添加的按钮尝试此操作

$('.btnAdd').length && $('.btnAdd').remove(); 

Updated Demo

Answer 4

使用jquery的.on方法，这样它也会绑定附加元素的事件。

$(document).on('click', '.btnAdd', function () {
    $('#otheranettedata').append(datatoappend);   
});

上面的代码将函数绑定到文档中带有“.btnAdd”类的所有元素。