將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>