0

我有一个带有文件输入和 2 个文本框的表单。如果需要上传多个文件，则可以复制所有 3 个输入。我试图在每个 div 的末尾添加一个清除按钮，以允许用户清除文件输入的值。但是对于我的生活，我无法让它发挥作用。

我正在尝试使用.last()，但一旦 div 被复制，它似乎并没有选择最后一个文件输入。

我的代码如下。

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" />
    <input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" />
    <button class="clear_certificate">Clear</button>
</div>

$(function() {
    $('.clear_certificate').click(function(event) {
    event.preventDefault();
    $('input[type="file"].user_certificate').last().val('');

    });
});

如果我只有一个带有输入的 div，它会很好地清除它。一旦 div 被复制，前一个 div 将不再清除。

有任何想法吗？感谢您的帮助，非常感谢！

编辑

我已经为我的问题创建了一个jsfiddle，希望这会有所帮助

4

3 回答 3

1

HTML代码：

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_0" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_0" />
    <input type="text" name="expiry_date[]" class="expiry_date" id="expiry_date_0" placeholder="DD/MM/YYYY" />
    <button id="clear_certificate_0" class="clear_certificate">Clear</button>
</div>
<div id="certificates_new"></div>
<p><button type="button" id="add_certificate">Add another certificate</button></p>

JS：

var i = 1;

$('#add_certificate').click(function(){
    var sHtml = '<input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_'+i+'" />';
    sHtml +=    '<input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_'+i+'" />';
    sHtml +=    '<input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" id="expiry_date_'+i+'" />';
    sHtml +=    '<button class="clear_certificate" id="clear_certificate_'+i+'">Clear</button>';
    $('#certificates_new').append(sHtml);
    i++;
});

$(document).on("click", '.clear_certificate', function() {
    var arrID = $(this).attr("id").split("_");
    var ID = arrID[2];
    $('#user_certificate_'+ID).val('');
    $('#expiry_date_'+ID).val('');
    $('#certificate_name_'+ID).val('');
});

所以现在这应该可以正常工作了......您应该对代码进行改进以缩短一点，但功能已经给出。

于 2013-06-25T13:09:01.947 回答
0

你写 [type="file"] only match type="file" 你的 html 只有一个文件输入

于 2013-06-25T13:05:37.717 回答
0

这应该完成您正在尝试做的事情：

$(".clear_certificate").click(function(){
   $(".certificates_list").children("input[type=file]:last-child").each(function(){
         // Do stuff here
   });
});

最好给您的包装器 div 一个 id，然后执行 $("#idOfDiv").children....

于 2013-06-25T13:29:28.980 回答