javascript - jQuery insertAfter 添加了 2 个相同的元素

Question

我有这段代码可以在我的页面中添加一个新的 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');

    });

第一次被称为它工作完美。第二次不是只添加一个 div，而是通过 1 次单击添加 2。第三次单击它时，单击它会增加 4 个。知道如何解决这个问题，以便一次添加一个吗？

Answer 1

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

尝试：

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

演示

Answer 2

好吧，现在第一次单击后有两个 .layers。所以，当你这样做

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

您正在为每个 .layer 插入该元素。

Answer 3

我建议首先定位元素，然后像这样添加：

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