使用不同的选择器从文档中取消绑定事件

Question

我的应用中有以下全局点击行为

$(document).on("click", ".btnSubmit", function (e) {
    e.preventDefault();
    $(this).parents("form").submit();
});

现在我有一个一次性实例，我需要在模态 window 上使用 .btnSubmit 按钮来实现不同的行为。我有两个解决方法

使用不同的 class
向按钮添加数据属性并向我上面的绑定添加条件

但是，我真的更喜欢像这样删除绑定

$(document).off("click", ".modal.mywindow .btnSubmit")

不幸的是，这不起作用，我猜是因为选择器与原来的选择器略有不同".btnSubmit"

有没有办法在不影响同一页面上 ".btnSubmit" 的其他实例的情况下解除事件与该特定选择器的绑定？

Answer 1

我相信您是正确的，"off" 的选择器必须与 "on" 中给出的选择器相匹配，根据 jQuery docs for .off():

To remove specific delegated event handlers, provide a selector argument. The selector string must exactly match the one passed to .on() when the event handler was attached.

如果您在 "on" 中添加一些小逻辑，在提交之前检查单击的按钮是否具有 .modal.mywindow 作为父项，这样是否令人满意？类似于：

$(document).on("click", ".btnSubmit", function (e) {
    e.preventDefault();
    if($(this).closest(".modal.mywindow").length <= 0) {
        $(this).parents("form").submit();   
    }
});

它类似于您的选项 2，但不需要您更改 HTML。

使用不同的选择器从文档中取消绑定事件

Unbind an event from Document with a different seletor

jquery

events

binding

jquery-selectors