Question

我有一张表格可以使用这些标签上传文件

 <form id="uploadpic" action="../image_shout" enctype="multipart/form-data" method="post">
    <input type="file" multiple="true" id="File1" class="choose-file" name="choose-file"/>    
</form>

现在我希望在选择文件时插入新的文件上传输入。

我使用此代码使用on change事件处理程序使用jquery尝试了这一点 -

$('.choose-file').on("change", function(e) {               
    $(this).after("<input type=\"file\" multiple=\"true\" id=\"File1\" class=\"choose-file\" name=\"choose-file\" />");                
});

令我沮丧的是，它只与输入字段的第一个元素绑定。在生成的后续输入上选择文件时，它不会添加新的输入字段。

小提琴here

为了让它发挥作用，我不得不做一些非常复杂的事情 -

$(document).ready(function() {    
function add_input($t) {        
    $t.after("<input type=\"file\" multiple=\"true\" id=\"File1\" class=\"choose-file\" name=\"choose-file\" />");        
    $('.choose-file').on("change", function(e) {
        var $t = $(this);        
        add_input($t);
    });        
}

$('.choose-file').on("change", function(e) {       
    var $t = $(this);        
    add_input($t);        
});   
});

小提琴here

如果能够以更简单，更清洁的方式完成此任务的解释和解决方案。

由于

Answer 1

您需要为动态元素委派事件，并确保ID是唯一的

$(document).ready(function () {
    $('#uploadpic').on('change', '.choose-file', function (e) {
        $('<input />', {
            type     : 'file',
            multiple : 'multiple',
            id       : 'File' + ($('.choose-file').length + 1),
            'class'  : 'choose-file',
            name     : 'choose-file'
        }).insertAfter(this);
    });
});

FIDDLE

Answer 2

使用您的代码可以执行此操作：

function add_input($t) {        
   $t.after('<input type="file" multiple="true" id="File' + $('[type="file"]').length +'" class="choose-file" name="choose-file" />');        
}


$(document).ready(function() {    
    $('#uploadpic').on("change", '.choose-file', function(e) {// delegate the event for dynamically added elemnt    
        var $t = $(this);        
        add_input($t);        
    });   
});

事件委托的语法是：

$(parent).on(event, selector, callback);

此处callback是您要触发的函数，而$(parent)是最接近的静态父级，在加载doc时可用，并且委托可以委托给$(document), $(document.body)的事件。始终可用，但委托给文档很慢。

jquery关于改变事件的奇怪行为

2 个答案: