jQuery 事件委托不适用于某些按钮

Question

我正在使用名为bluimp 的jQuery 文件上传插件。我的 2 个按钮（start、cancel）正在动态形成，因此我无法将事件侦听器附加到它们。我已将一个侦听器附加到它们最近的静态祖先，即 ID 为 fileupload 的表单。通过start按钮成功上传后形成delete。

delete 按钮侦听器正在工作，但start 却没有。 （我说的是两个按钮的自定义侦听器以执行其他操作。blueimp 提供的默认操作工作正常。）

代码sn-ps：

html（动态生成的按钮html）

<td>
    <button id="start-upload-button" class="btn btn-primary start">
        <i class="glyphicon glyphicon-upload"></i>
        <span>Start</span>
    </button>
    <button class="btn btn-warning cancel">
        <i class="glyphicon glyphicon-ban-circle"></i>
        <span>Cancel</span>
    </button>
</td>

点击start并上传完成后delete的html就形成了

<button id="file-delete-button" class="btn btn-danger delete" data-type="POST" data-url="/delete/25">
    <i class="glyphicon glyphicon-trash"></i>
    <span>Delete</span>
</button>

js

$(document).ready(function() {
    $('#fileupload').on("click", "#file-delete-button", function(event) {
        console.log("Delete event fired");
        $("#sourcetext").hide();
    });

    $('#fileupload').on("click", "#start-upload-button", function(event) {
        console.log("Upload event fired");
        $("#sourcetext").hide();
    });
});

Answer 1

您应该使用on 函数。 bind 事件已被弃用。

$(document).on('fileuploadstart', '#fileupload',function(e){
     console.log("Upload event fired");  
});

即使元素是自动生成的，这也将保证元素中的绑定。

Answer 2

看来您应该按照 manual 将回调绑定到您的按钮

$("#fileupload").bind('fileuploadstart', function(e){
     console.log("Upload event fired");  
});

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素