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 클릭으로 추가합니다. 3 번 클릭하면 1 클릭으로 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);