Javascript 委托uploadfile事件以控制动态加载的

我正在使用分配给

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

在my

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控制台中复制并粘贴此事件，这会很好地工作，但我不知道在加载模板后如何委派此事件。

有两种方法：

第一种方式：

最初启动

fileupload

（插入模板之前），并设置更改时的属性：

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

详情如下：

第二种方式：

在回调中插入模板后绑定

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

        // ...

    });

});

---

此处有更多详细信息：

您不能多次使用相同的

id

。使用唯一的id（或类，但在这种情况下，您必须使用id，因为您只想提交打开的对话框）。

$('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({

        // ...

    });

});