用jquery添加額外的輸入點擊使用jquery

我正在使用一個UI窗體（其中包括）允許用戶點擊一個鏈接來添加額外的文件上傳輸入字段，以防他希望上傳超過標準3初始選項。用jquery添加額外的輸入點擊使用jquery

兩件事情：

不禁想，一定有做什麼，我試圖做一個簡單的方法。 JavaScript從來不是我強大的西裝之一，我可能會走很長的路。
出於某種原因，我提出瞭解決方案;只允許添加一個附加字段，並且不再需要，它只是停止工作！我希望每次單擊鏈接時都會添加另一個字段;不只是一次。

下面我一直在使用的代碼;我留下了評論，所以你可以看到我已經嘗試過。

的jQuery：

// add and remove addtional image upload inputs 
    jQuery('#add_image_upload_field').click(function(e) { 

    e.preventDefault(); 

    var newInput = '<input type="file" class="fullwidth" name="upload_attachment[]" />'; 

    // jQuery(this).prev().append(newInput).slideDown('slow'); 
    // jQuery('#upload_image input').filter(':last').append(newInput).slideDown('slow'); 
    // jQuery('input[name="upload_attachment[]"]').filter(':last').append('newInput'); 
    // jQuery('input[name="upload_attachment[]"]').append('newInput'); 

var addLink = '<a href="#" id="add_image_upload_field">Add another image input field</a>'; 

jQuery(this).parent().append(newInput); 
jQuery(this).remove(); 
jQuery('#upload_image').append(addLink); 

});

HTML：

<!-- Upload a picture --> 
<fieldset name="upload_image" id="upload_image"> 
    <label for="upload_image">Upload pictures:</label> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 
    <input type="file" id="" tabindex="" name="upload_attachment[]" class="fullwidth" /> 

    <a href="#" id="add_image_upload_field">Add another image input field</a> 
    <!--<input type="button" id="add_image_upload_field" value="Add another image input field" />--> 

</fieldset>

我已經看到了這個做了幾十頁，但就是不能讓它開始工作;任何幫助表示讚賞。

來源

2013-09-28 Ronald De Ruiter

當您替換/添加元素時，附加到它的事件將消失。因此，如果您要添加新圖像並希望附加事件處理程序，則需要委託加載頁面時已存在的元素。像：

jQuery(document).on('click','#add_image_upload_field', function(e) {

演示here

來源

2013-09-28 23:34:43 Sergio

感謝@Sergio，我知道ID是唯一的，所以我沒有加入他們我的想法是給具有索引後添加他們。你的第二點是有道理的，你是對的;我已經忘記了這一點。我一直在試圖找到一個選擇器，它允許我在最後一次輸入之後但在添加它之前的鏈接之前引入'newInput'，但正如你所看到的，我迄今爲止還沒有... –

@RonaldDeRuiter，我刪除了ID部分，我看起來太快了，你的新鏈接取代了舊鏈接，而不是雙倍。所以我的回答現在更加正確:)是否按預期工作？ – Sergio

非常感謝，完美的作品，只是測試它。我決心不去睡覺，直到它完成了muito obrigado！：D –

用jquery添加額外的輸入點擊使用jquery

回答

相關問題