将html输入框添加到div上点击使用jquery

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

或使用追加为他人在相同的HTML您#fileInput元素建议

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

Answer 2

你目前的代码替换现有的HTML。你可能想要使用的是append()方法。

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

Answer 3

那是因为你不每次加到HTML，你只需将它设置为显示单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>