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

Answer 1

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

Пытаться:

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

демонстрация

Answer 2

Я бы порекомендовал сначала нацелиться на элемент, а затем добавить после него вот так:

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

Answer 3

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

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

Вы вставляете этот элемент в.layer.