使用jQuery在单击时向div添加html输入框

Question

我需要在点击按钮时向页面添加输入框，我已经编写了以下的jquery脚本。第一次单击时它会添加一个输入框，但不会重复添加。

<script type="text/javascript">
   function addInput(){
      $('#fileinput').html('<label>Filename:</label>
                        <input type="file" name="file"  id="file" />');
   }
</script>

请有人帮我修改代码，使得每次单击按钮时都会添加一个输入框。

- Dilini Rajapaksha

Answer 1

$('#buttonID').click(function(){
    $('#fileinput').html($('#fileinput').html()+'<label>Filename:</label>
                    <input type="file" name="file"  id="file" />');
});

或者像其他人建议的那样使用 append。

$('#buttonID').click(function(){
    $('#fileinput').append('<label>Filename:</label>
                    <input type="file" name="file"  id="file" />');
});

- Johnny Craig

Answer 2

您的代码目前会用相同的HTML替换您的#fileInput元素中已有的HTML。您可能想要使用的是append()方法。

   function addInput(){
      $('#fileinput').append('<label>Filename:</label>
                        <input type="file" name="file"  id="file" />');
   }

- kafuchau

Answer 3

尝试使用append而不是html： http://api.jquery.com/append/

<script type="text/javascript">
 function addInput(){
  $('#fileinput').append('<label>Filename:</label>
              <input type="file" name="file"  id="file" />');
}
</script>

- DMac the Destroyer

Answer 4

这是因为您每次没有进行添加到HTML，而只是将其设置为显示单个input。

- Widor