委托uploadfile事件控制动态加载

Question

我使用的是fileupload分配给事件#fileupload控制。 当我将此代码放在静态页面中时，它运行良好，但我希望此控件加载到这样的 Javascript 模板中：

<script type="text/template" id="propertyCollectionTemplate">
    <span id="firstUpload" class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
    </span>    
</script>

在我的舞台中单击一个表格行时会加载此模板

$('table.collection tbody tr').click(function (e) {
        e.preventDefault();
        var m = page.properties.get(this.id);
        page.showDetailDialog(m);

});

在我的showDetailDialog函数中有这个代码：

showDetailDialog: function (m) {

        // show the modal dialog
        $('#propertyDetailDialog').modal({ show: true });
        // ... fecth all data for my other controls....

这是我在静态模式下绑定的上传事件：

 $('#fileupload').fileupload({
     url: page.url,
     dataType: 'json',
     done: function (e, data) {
         alert("hola");
         $.each(data.result.files, function (index, file) {
             $('#propertyimage').val("/propertylocator/upload/server/php/files/" + file.name);
         });
         $('#progress .progress-bar').css('width', 0 + '%');
     },
     progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $('#progress .progress-bar').css('width', progress + '%');
     }
 }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

如果我在加载模态弹出窗口时将此事件复制并粘贴到 Chrome 控制台中，这可以正常工作，但是一旦我加载了模板，我不知道如何委派此事件。

Answer 1

有两种方式：

第一种方式：

最初启动文件fileupload （在插入模板之前）并在更改时设置属性：

$('#fileupload .files').on('change', ':file', function (e) {
    $('#fileupload').fileupload('add', {
        fileInput: $(this)
    });
});

更多细节在这里： https : //github.com/blueimp/jQuery-File-Upload/issues/1260

第二种方式：

在回调中插入模板后绑定文件fileupload ，例如：

$('table.collection tbody tr').click(function (e) {

    // your 'click' code
    e.preventDefault();
    var m = page.properties.get(this.id);
    page.showDetailDialog(m);

    // bind fileupload
    $('#fileupload').fileupload({

        // ...

    });

});

此处有更多详细信息： 动态创建文件输入时 jQuery 文件上传不起作用