Question

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

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

有人可以帮我修改代码，以便每次点击按钮时都会添加一个输入框。

Answer 1

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

或使用附加建议

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

Answer 2

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

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

Answer 3

那是因为您每次都没有添加，只需将其设置为显示单input。

Answer 4

尝试使用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>

使用jquery在单击时将html输入框添加到div

4 个答案: