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 он добавляет 2 с 1 кликом. В третий раз, когда я нажимаю на него, он добавляет 4 с 1 кликом. Любая идея, как я могу это исправить, поэтому он просто добавляет по одному?

Answer 1

Это потому, что ваш селектор .layer возвращает несколько элементов после первого добавления и, следовательно, он будет добавить по одному для каждого из них, так что используйте .layer:last

Try:

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

Demo

Answer 2

Ну, теперь у вас есть два листа после первого щелчка. Итак, когда вы делаете

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