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

您应该使用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（）方法用于将事件处理程序直接附加到元素

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

2 个答案: