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

我有一个使用这些标签上传文件的表单

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

现在我想在选择一个文件时，应该插入一个新的文件上传输入

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

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

$（'.choose file'）。关于（“更改”，函数（e）{
$（此）。在（“”）之后；
}); 

令我沮丧的是，这只与输入字段的第一个元素相关联。在随后生成的输入上选择文件时，不会添加新的输入字段

小提琴

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

$(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);        
});   
});

$（文档）.ready（函数（）{
函数add_输入（$t）{
$t，以（“”）号填列；
$（'.choose file'）。关于（“更改”，函数（e）{
var$t=$（本）；
增加投入（$t）；
});        
}
$（'.choose file'）。关于（“更改”，函数（e）{
var$t=$（本）；
增加投入（$t）；
});   
});

小提琴

对此的任何解释和解决方案，如果可以以更简单、更干净的方式进行

---

谢谢

您需要为动态元素委派事件，并确保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);
    });
});

$（文档）.ready（函数（）{
$（'#uploadpic'）。在（'change'，'上。选择file'，函数（e）{
$('', {
键入：“文件”，
多个：“多个”，
id:'文件'+（$（'.choose File'）。长度+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);
    });
});

$（文档）.ready（函数（）{
$（'#uploadpic'）。在（'change'，'上。选择file'，函数（e）{
$('', {
键入：“文件”，
多个：“多个”，
id:'文件'+（$（'.choose File'）。长度+1），
“类”：“选择文件”，
名称：“选择文件”
}).在（本）之后插入；
});
});

---

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

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);        
    });   
});

---

此处，

回调

是您要触发的函数，

$（父级）

是加载文档时可用的最接近的静态父级，用于委托事件，您可以委托给

$（文档），$（document.body）

始终可用，但委派给文档的速度较慢。

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

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);        
    });   
});

---

此处，

回调

是您要触发的函数，

$（父级）

是加载文档时可用的最接近的静态父级，用于委托事件，您可以委托给

$（文档），$（document.body）

始终可用，但委派给文档的速度很慢。

这与问题陈述的行为相同。尝试将文件添加到新的文件输入项。这与问题陈述具有相同的行为。尝试将文件添加到新文件输入项。