事件侦听器中的 JQuery 事件绑定

Posted 2023-05-08

【中文标题】事件侦听器中的 JQuery 事件绑定

【英文标题】：JQuery Event Binding within Event Listener

【发布时间】：2021-09-28 03:23:42

【问题描述】：

我有一个按钮应该从我的表格中删除一个条目。但是，当我单击它时，它会向服务器发送多个请求。我已经尝试阻止事件传播和放置 e.preventDefault() 但它仍然发送多个请求。

有什么我可以改变的，让这个每次请求只发送一次吗？

$("#apiTableController").off("click").on("click", "#removeKey", function (e) 
    e.preventDefault();
    $("#confirmation-dialog").dialog("open");
    $("#confirmation-dialog").on("dialogclose", function (event) 
        event.stopPropagation();
        if ($("#confirm-modal").val() == "true") 
            selected = apiTable.rows('.selected').data().toArray();
            var form_data = selected;
            $.ajax(
                url: "@Url.Action("Remove", "ApiKey", new area="Configuration")",
                method: "POST",
                data: JSON.stringify(form_data),
                contentType: "application/json",
                success: function (result) 
                    toastr.success("Access Removed");
                    apiTable.draw();
                ,
                error: function (error) 
                    toastr.error(error.responseText);
                
            );
        
    );
    return false;
);

<div id="apiTableController" class="pull-right bottom-margin">
    <a href="#" class="btn btn-outline-secondary" id="removeKey"><i class="fas fa-trash-alt"></i></a>
</div>

【问题讨论】：

您能否在每个事件中添加一个console.log() 条目以查看每个事件何时触发？我怀疑其他一些事件正在冒泡并反复触发它。

确认对话框需要关闭

【参考方案1】：

所以如果我添加一个$("#confirmation-dialog").off("dialogclose").on("dialogclose")，它可以正常工作吗？