jQuery on click using .before()

Question

У меня есть этот метод, который делает некоторый ajax и с результатом делает новый div перед div, а затем вставляет в него ответ ajax. Проблема в том, что я использую on ('click'), мой второй клик присоединяет новый div до ранее созданного div (что мне нужно), но также создает еще один div после (не то, что я хочу), который является точно таким же.

AJAX/Jquery:

$(document).on('click', '.ajaxcommentbutton1', function() { 
var currentDiv, pageValue, newPage, newPageid; 
currentDiv = $(this).attr('group'); 
pageValue = parseFloat($(this).attr('data')); 
newPage = pageValue + 1; 
newPageid = '.' + newPage; 

$.ajax({url:"comments.php", 
     type:'POST',    
    dataType:'text', 
     data: {id: currentDiv, 
       page: newPage}, 
    success:function(result){ 
     $('div[data="' + currentDiv + '"] .commentsContainer > div').before("<div class='" + newPage + "'>&nbsp</div>"); 
     $('div[data="' + currentDiv + '"] ' + newPageid).html(result); 
     $('button[group="' + currentDiv + '"]').attr('data', newPage); 
     $('button[group="' + currentDiv + '"]').off(); 
    }}); 
}); 

HTML Результат первого щелчка:

<div class='commentsContaier'> 
    <div class="2">stuff in here</div> 
    <div class="1">stuff in here</div> 
</div> 

HTML результат второго щелчка (BAD ONE):

<div class='commentsContaier'> 
    <div class="3">stuff in here</div> 
    <div class="2">stuff in here</div> 
    <div class="3">stuff in here</div> 
    <div class="1">stuff in here</div> 
</div> 

Answer 1

Поскольку $('div[data="' + currentDiv + '"] .commentsContainer > div') матчи каждый <div> под вашим контейнером, и .before() добавит ваш AJAX в каждом сопоставленном <div>, дублируя ваш контент AJAX.

т.е. во второй мыши, новый элемент вставлен в <div class="1">stuff in here</div> и <div class="2">stuff in here</div>

Попробуйте заменить его $('div[data="' + currentDiv + '"] .commentsContainer > div:first-child') соответствовать только первому ребенку всех <div> с, с селектором :first-child