Javascript jQuery insertAfter添加了两个相同的元素

我有一段代码，它在我的页面中添加了一个新的div

$(document).on('click', '#addLayer', function(e) {

        $('.layer').removeClass('selectedLayer');
        var nl = $('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');
        nl.arctext({radius: 1100});
        nl.resizable({handles: "nw,sw,se,ne"}).draggable().rotatable({ handles: "s"});
        $('#bead-text').val('New Layer');

    });

$（文档）。在（'click'，'#addLayer'，函数（e）{
$（'.layer'）.removeClass（'selectedLayer'）；
var nl=$（'New Layer'）.insertAfter（'.Layer'）；
nl.arctext（{radius:1100}）；
nl.可调整大小（{handles:“nw，sw，se，ne”}）.draggable（）.rotatable（{handles:“s”}）；
$（“#珠子文本”）.val（“新层”）；
});

---

第一次叫它时，它工作得很完美。第二次不是只添加一个div，而是单击一次就添加了2个div。我第三次单击它时，它会以1次单击添加4次。你知道我该如何解决这个问题，让它一次只添加一个吗？

这是因为你的选择器

。图层在第一次添加后返回多个元素，因此它会为每个元素添加一个，所以使用
。图层：last

尝试：

$（'newlayer'）.insertAfter（'Layer:last'）；

这是因为您的选择器
.layer
在第一次添加后返回多个元素，因此它将为每个元素添加一个元素，因此请使用
.layer:last

尝试：

$（'newlayer'）.insertAfter（'Layer:last'）；

这是因为您的选择器
.layer
在第一次添加后返回多个元素，因此它将为每个元素添加一个元素，因此请使用
.layer:last

尝试：

$（'newlayer'）.insertAfter（'Layer:last'）；

这是因为您的选择器
.layer
在第一次添加后返回多个元素，因此它将为每个元素添加一个元素，因此请使用
.layer:last

尝试：

$（'newlayer'）.insertAfter（'Layer:last'）；

第一次点击后，现在有两个。层。所以，当你这么做的时候

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');

$（'newlayer'）。插入（'.Layer'）；

您正在按.layer插入该元素。
好的，在第一次单击后，现在有两个.layer。所以，当你这么做的时候

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');

$（'newlayer'）。插入（'.Layer'）；

您正在按.layer插入该元素。
好的，在第一次单击后，现在有两个.layer。所以，当你这么做的时候

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');

$（'newlayer'）。插入（'.Layer'）；

您正在按.layer插入该元素。
好的，在第一次单击后，现在有两个.layer。所以，当你这么做的时候

$('<div class="layer selectedLayer" data-arc="1100">New Layer</div>').insertAfter('.layer');

$（'newlayer'）。插入（'.Layer'）；

您正在按.layer插入该元素。
我建议先将该元素作为目标，然后像这样在其后面添加：

var html = '<div class="layer selectedLayer" data-arc="1100">New Layer</div>';

// select the last element with .layer and put HTML after it
var nl = $('.layer').last().after(html);

var html='newlayer'；
//用.layer选择最后一个元素，并将HTML放在后面
var nl=$（'.layer'）.last（）.after（html）；
我建议首先以元素为目标，然后像这样在元素之后添加：

var html = '<div class="layer selectedLayer" data-arc="1100">New Layer</div>';

// select the last element with .layer and put HTML after it
var nl = $('.layer').last().after(html);

var html='newlayer'；
//用.layer选择最后一个元素，并将HTML放在后面
var nl=$（'.layer'）.last（）.after（html）；
我建议首先以元素为目标，然后像这样在元素之后添加：

var html = '<div class="layer selectedLayer" data-arc="1100">New Layer</div>';

// select the last element with .layer and put HTML after it
var nl = $('.layer').last().after(html);

var html='newlayer'；
//用.layer选择最后一个元素，并将HTML放在后面
var nl=$（'.layer'）.last（）.after（html）；
我建议首先以元素为目标，然后像这样在元素之后添加：

var html = '<div class="layer selectedLayer" data-arc="1100">New Layer</div>';

// select the last element with .layer and put HTML after it
var nl = $('.layer').last().after(html);

var html='newlayer'；
//用.layer选择最后一个元素，并将HTML放在后面
var nl=$（'.layer'）.last（）.after（html）；