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，它只需点击一下即可添加2。我第三次点击它，只需点击一下即可添加4。知道如何解决这个问题，所以它一次只能添加一个吗？

Answer 1

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

尝试：

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

<强> Demo

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

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

3 个答案: