limit JavaScript append to dom

Question

Я хочу добавить текстовые поля, когда пользователь нажимает кнопку на теле. Но я хочу добавить их только один раз, пока пользователь находится на этой странице. Я пробовал использовать счетчик, чтобы сделать это. Но есть некоторые незначительная проблема.

<script type="text/javascript">$(document).ready(function(){ 
    var k=0; 
    $('#show').click(function(){ 

     if(k==null){ 
    for(i = 0; i < 5; i++) { 
    $('body').append('<br/>guve your name<input type="text" id="div'+ i +'" />'); 
     }; 
    }; 
    k=1; 
}); 

});</script> 

в HTML

<button id="show">Hii</button> 

Answer 1

Использование one() способ прикрепить обработчик события, который выполняет только один раз для обработчика типа события и элемента.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('#show').one('click', function() { 
 
     for (i = 0; i < 5; i++) { 
 
     $('body').append('<br/>guve your name<input type="text" id="div' + i + '" />'); 
 
     }; 
 
    }); 
 
    }); 
 
</script> 
 

 
<button id="show">Hii</button>

Answer 2

У вас есть несколько вариантов здесь:

Проверьте, если элемент существует (простейшие).

Как вы добавляете divs с идентификаторами, они могут быть проверены напрямую, что позволяет вам беспокоиться о переменной.

$('#show').click(function() { 
    if ($("#div0").length == 0) { 
     for(i = 0; i < 5; i++) { 
      $('body').append('<br/>give your name<input type="text" id="div'+ i +'" />'); 
     }; 
    } 
}); 

Использование one() (наименее благоприятный вариант имо)

$('#show').one(function() { 
    for(i = 0; i < 5; i++) { 

Remove (или отключить) кнопку один раз она была нажата

(только разумный вариант для UX, tha т может быть объединен с одним(), если желательно)

$('#show').click(function() { 
    $('#show').hide(); 
    for(i = 0; i < 5; i++) { ...