Javascript 动态创建文件输入时，jQuery文件上载不起作用

我正在使用这个jquery uploader（），当文件输入放在站点的原始代码中时，它工作得很好，但是我正在用jquery动态地附加字段，它不工作。以下是触发上载的jquery：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            alert(file.name);
            //$('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

<input class="fileupload" type="file" name="files[]" data-url="uploads/">

$（'.fileupload'）.fileupload({
数据类型：“json”，
完成：功能（e，数据）{
$.each（data.result.files，函数（索引，文件）{
警报（文件名）；
//$（'
'）.text（file.name）.appendTo（document.body）；
});
}
});

这就是触发上传的原因：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            alert(file.name);
            //$('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

<input class="fileupload" type="file" name="files[]" data-url="uploads/">

以下是jquery附加的代码：

$(document).on('click','.addItem', function(){
            $('<!--ROW START-->\
                <form class="widget-content item" data-url="uploads/">\
                    <div class="row">\
                        <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <input type="hidden" class="itemId" name="itemId[]" value="">\
                        <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                        <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
                        <div class="col-md-2">\
                            <div class="fileinput-holder input-group">\
                                <input class="fileupload" type="file" name="files[]">\
                            </div>\
                        </div>\
                        <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
                    </div>\
                </form>\
            <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
            $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
        });

$（文档）.on（'click'，'addItem'，function（））{
$('\
\
\
\
\
\
\
这是因为在添加元素之前绑定了
fileupload
事件

尝试将代码移动到回调函数中，该函数将在创建输入元素后执行。由于
appendTo（）
，您可以使用
每个（回调）
：

如果需要在代码中的多个位置将事件绑定到
.fileupload
，可以创建一个函数来避免代码重复，如下所示：

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

然后在回调中调用它，如前所述：

$('code_that_you_append').appendTo('some_element').each(function () {
    bindFileUpload();
});

我创建了一个。它绑定
单击
而不是
文件上传
以简化事情（文件上传是外部插件…），但一般规则保持不变。
您需要使用jQuery live（）函数

我发现这个建议对我有用

注意：请先查看已接受的答案。

我认为被接受的答案并没有什么错误，我只是在努力弥补这个错误。
在@MichałRybak上，您将看到，每次单击
添加项目
时，另一个单击事件也将添加到先前添加的
新链接
（添加更多
新链接
，并首先查看
新链接
显示警报时间编号
新项目
）。因为每次添加
新链接
时，我们都会再次向所有
新链接
元素添加单击事件

 $('<p><a href="#" class="link">new link</a></p>').appendTo('body').each(function () {
      // bindClickToLink call every 'new link' and add click event on it
        bindClickToLink();
    });  

$（'
'）。附录（'body'）。每个（函数（）{
//bindClickToLink调用每个“新链接”并在其上添加单击事件
bindClickToLink（）；
});  

若要解决此问题，请将单击事件添加到我们刚刚添加到新创建的项目中的所有项目中。这是我的解决方案。
首先将上载功能与静态标识符绑定。这里的“document”是静态标识符。您可以使用任何类似的未动态添加的内容。通常，文档的使用频率更高

$(document).on('click', '.fileupload', function () {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                //$('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

$（文档）.on（'click'，'fileupload'，函数（）{
$（'.fileupload'）.fileupload({
数据类型：“json”，
完成：功能（e，数据）{
$.each（data.result.files，函数（索引，文件）{
警报（文件名）；
//$（'
'）.text（file.name）.appendTo（document.body）；
});
}
});
});
通常在将输入元素附加到正文之前调用$.fileUpload时会发生这种情况。请在创建并附加元素后尝试调用它。我已在文档底部弹出了它，不走运：（我添加了附加的代码，因此您可以查看您是否可以发布示例？添加。如果您可以发布用于附加表单的jQuery代码，我将能够使我的示例更精确。因此，它需要与我附加的代码配合使用？我正在添加多个项目，那么这是最佳做法吗？添加了代码：）我已经更新了我的答案，以说明在需要在多个位置绑定此事件时如何避免代码重复。如果您无法使此解决方案正常工作，请参阅此答案：我必须将我的“$（'.class'）。on（'单击，函数（e）{”包装替换为“$（文档）。on（'单击'，'.class'，函数（e）{”这样它就可以检查每一个点击事件。这个问题已经三年多了，被接受的答案很好