jQuery каждый цикл удваивает найденные результаты

Question

Я пытаюсь выяснить, как решить эту проблему;

Вот мой HTML:

<div id="result"> 
    <div class="selectable" data-id="1"> Item 1 </div> 
    <div class="selectable" data-id="2"> Item 2 </div> 
    <div class="selectable" data-id="3"> Item 3 </div> 
    <div class="selectable" data-id="4"> Item 4 </div> 
    <div class="selectable" data-id="5"> Item 5 </div> 
</div> 

<button class="insert">Insert</button> 

<div id="master"></div> 

и здесь JS:

$(document).ready(function() { 
     $("#result").on('click', '.selectable', function() { 
      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
      } else { 
       $(this).addClass('active'); 
      } 
     }); 

     $(".insert").on('click', function() { 
      var html = ''; 
      $("#result .active").each(function() { 
       var id = $(this).data('id'); 
       html += '<div class="rows"> ' + id + ' </div>'; 
      }); 
      $("#master").prepend(html) 
     }); 
    }); 

Выбор и отменив ".selectable" пунктов работает отлично, но по какой-то причине, если два элемента выбран, HTML вставленный в «master» div всегда удваивается, поэтому я получаю 4 элемента вместо двух.

Я думаю, что проблема связана с каждым циклом. Если я делаю что-то вроде console.log($("#result .highlite").length); прямо перед циклом, отображается количество выбранных элементов.

Answer 1

Кажется, вы должны заменить HTML, каждый раз, когда нажата кнопка

Попробуйте изменить»

$("#master").prepend(html) 

Для

$("#master").html(html) 

Answer 2

вы можете попробовать ниже код JQuery:

$(document).ready(function() { 
     $("#result").on('click', '.selectable', function() { 
     $(".selectable").removeClass('active'); 
     $(this).addClass('active');   
     }); 

     $(".insert").on('click', function() { 
      var html = ''; 
      $("#result .active").each(function() { 
       var id = $(this).data('id'); 
       html += '<div class="rows"> ' + id + ' </div>'; 
      }); 
      $("#master").prepend(html) 
     }); 
    }); 

DEMO

Надеюсь, что это решит вашу проблему.

Благодаря