为什么新创建的输入标签不会停留在页面上？

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" />