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');
   };
});

FIDDLE

Answer 2

将现有按钮更改为带有id的输入，并使用JS中的id。您的问题是单击按钮时提交的表单。

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

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

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

2 个答案: