Зависимость от петли от ввода номера

Question

Я пытаюсь повторить div, количество раз зависящее от числа, выбранного в поле ввода номера, но в настоящее время при изменении ввода номера значения умножаются. Поэтому, если вы переходите от 2 до 3, он повторяет div 6 раз, а не просто 3. Как я могу сбросить цикл, чтобы он использовал только текущий номер?

http://jsfiddle.net/deliciouslycheesy/6rb94mry/

$('#numRepeat').on('change keyup input', function() { 
    var el = $(".repeat-me").get(0); 
    var numRepeat = $("#numRepeat").val(); 

    for(var i = 1;i < numRepeat;i++){  
    var newEl = $(el).after(el.cloneNode(true)); 
    } 
}).change(); 

Answer 1

Вы должны удалить те, которые были добавлены раньше:

$('#numRepeat').bind('change keyup input', function() { 
 
\t var el = $(".repeat-me").get(0); 
 
    $(".repeat-me:not(:first)").remove(); 
 
\t var numRepeat = $("#numRepeat").val(); 
 
    
 
    for(var i = 1;i < numRepeat;i++){  
 
    var newEl = $(el).after(el.cloneNode(true)); 
 
\t } 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="numRepeat" value="2"/> 
 
<div class="repeat-me">REPEAT</div>

JSFiddle

Answer 2

Я не уверен, почему вы используя три событие change keyup input, только input событие обнаружит изменения внутри input поле, проверьте Updated fiddle.

Я предлагаю, чтобы отделить модель повторяется div от результата, я думаю, что сделает код более понятным, а потому, что вы используете JQuery, вы можете заменить cloneNode() на clone().

Надеюсь, это поможет.

---

$('#numRepeat').on('input', function() { 
 
    var el = $("#model-div .repeat-me"); 
 
    var numRepeat = $(this).val(); 
 
    
 
    $('#result-div').empty(); //Clear the result div 
 
    
 
    for(var i = 0 ; i < numRepeat ; i++) 
 
    {  
 
     $('#result-div').append($(el).clone(true)); 
 
    } 
 
})

#model-div{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="numRepeat" value="0"/> 
 

 
<div id="model-div"> 
 
    <div class="repeat-me">REPEAT</div> 
 
</div> 
 

 
<div id="result-div"></div>