使用Jquery / javascript多次单击时，防止内容重复

Question

This is an extension to this question How to get value from nested HTML tag with Jquery/Javascript

When I execute the following script after the first time, the <h2> -tags get duplicated multiple, though I only want the three values displayed...

so my question is, what is going wrong here?

$(document).ready(function () {

    $('.submit').on('click', function () {

       $('#newLoanDiv').append('<div id="test"></div>');
       $('.results-page').contents().appendTo($('#test'));

       setTimeout( function(){ 
          $('.submit').removeAttr('disabled');
          $('.sums').find('dl').each(function () {    
              $('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
          });
       }, 100 );
    });

});

Any help is appreciated...

Answer 1

Try the following. Try $('#test').empty(); to clear data of the #test on every click.

$('.submit').on('click', function () {
   $('#newLoanDiv').append('<div id="test"></div>');
   $('#test').empty();
   $('.results-page').contents().appendTo($('#test'));

   setTimeout( function(){ 
      $('.submit').removeAttr('disabled');
      $('.sums').find('dl').each(function () {    
          $('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
      });
   }, 100 );
});