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

Question

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

delete 按钮侦听器正在工作，但 start 按钮侦听器不工作。（我说的是我为两个按钮执行额外操作的自定义侦听器。blueimp 提供的默认操作工作正常。）

代码片段：

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

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

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

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements

Answer 2

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

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

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

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

jQuery event delegation not working for some buttons

jquery

jquery-plugins

blueimp

jquery-events

event-delegation