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

    }); 

它第一次被稱爲它的作品完美。第二次，而不是添加只有一個股利它添加2與1點擊。我第三次點擊它，它添加4與1點擊。任何想法如何我可以解決這個問題，所以它只是一次添加一個？

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