為什么新創建的輸入標簽不會停留在頁面上？

Question

我試圖根據用戶輸入的數字創建新的輸入標簽。 我的代碼將創建正確數量的標簽，但是它們幾乎立即被刪除。 為什么？

<form>
 <input type='text' id='input' />
 <button>Submit</button>
</form>
<div id="box">
</div>

<script>
$(document).ready(function() {
 $('button').click(function() {
  var x = $('#input').val(); 
  for(var i=0 ; i < x; i++) {
        $('<input type="text" /><br>').prependTo('#box');
    };
 });
});

</script>

Answer 1

在事件上調用preventDefault以停止觸發button動作

$('button').click(function(e) {
   e.preventDefault();
   var x = $('#input').val(); 
   for(var i=0 ; i < x; i++) {
      $('<input type="text" /><br>').prependTo('#box');
   };
});

小提琴

Answer 2

將現有按鈕更改為具有ID的輸入，然后在JS中使用該ID。 您的問題是單擊按鈕時正在提交表單。

http://jsfiddle.net/Delorian/65gLvfdx/

<input type="button" id="update" value="Submit" />