如何删除 $(document).on 点击事件？答案

【问题标题】：How to remove $(document).on click event?如何删除 $(document).on 点击事件？
【发布时间】：2014-04-19 12:03:54
【问题描述】：

这是添加事件的代码

   $(document).on({
      click: function() {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
          .attr('placeholder', $(this).text())
          .focus();
      }         
    }, '.form-template-name');

对于某些情况，我不希望触发此事件。所以我尝试的是

$('.form-template-name').off();
$('.form-template-name').unbind();

但似乎没有任何效果。我错过了什么吗？

【问题讨论】：

您需要知道$(document).on 绑定到document，而不是目标选择器元素，它在事件发生时应用选择器。您需要将其从所连接的同一级别中删除。
我找不到任何从同一级别删除的方法。
Arun P Johny 的回答似乎有效（删除任何单击的元素，然后删除按钮按下时的处理程序），但也许我们误解了您的问题。 请解释所需的行为。
@TrueBlueAussie 这是我的错误。确实，Arun P Johny 的回答有效

标签： javascript jquery

【解决方案1】：

事件处理程序绑定到一个元素。您可以将事件处理程序与其附加到的元素解除绑定，但不能将其与后代元素解除绑定，因为它不在侦听的位置。

您可以：

检查事件对象的the target property（事件处理函数的第一个参数）以查看单击了哪个元素，然后在执行任何操作之前查看return。
将新的事件处理程序绑定到要阻止事件触发的元素和prevent the event from continuing up the DOM。

【讨论】：

【解决方案2】：

试试这个。

$(document).off('click', '.form-template-name');

【讨论】：

【解决方案3】：

您也可以尝试使用 event.preventDefault() 功能。这里有更详细的描述：http://api.jquery.com/event.preventdefault/

【讨论】：

【解决方案4】：

试试这个：

$('.form-template-name').unbind("click"", event);

并将点击事件定义为：

var event = function() {
    $(this).hide();
    $('#form_name').removeClass('hide');
    $('#form_template_name')
      .attr('placeholder', $(this).text())
      .focus();
};

然后像以前一样使用它。

【讨论】：

【解决方案5】：

将您的点击处理程序更改为：

$(document).on({
    'click.myevent': function () {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
            .attr('placeholder', $(this).text())
            .focus();
    }
}, '.form-template-name');

那么你可以使用.off()，名字之间有间隔event names：

$(document).off('click.myevent', '.form-template-name');

【讨论】：

【解决方案6】：

你可以试试：

var clickEvent = function() {
    $(this).hide();
    $('#form_name').removeClass('hide');
    $('#form_template_name')
      .attr('placeholder', $(this).text())
      .focus();
};

$(document).on({
   click: clickEvent         
}, '.form-template-name');

然后解绑：

$(document).unbind('click', clickEvent);

【讨论】：

【解决方案7】：

需要将事件传递给unbind到.off()，另见namepsaced事件名称的使用

$(document).on({
    'click.myevent': function () {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
            .attr('placeholder', $(this).text())
            .focus();
    }
}, '.form-template-name');

和

$(document).off('click.myevent', '.form-template-name');

演示：Fiddle

【讨论】：

点击按钮不应触发事件处理程序，但随后点击其他地方应该，但您已将其完全删除。
@Quentin 我没明白你想说什么，OP 的解决方案是什么？
@shiva 你能更新小提琴来解释你的问题吗
@C-link Quentin 所说的可能与忽略某些元素导致处理程序触发有关
@shiva 它被称为namespaced event names... 之所以使用它是因为如果您只使用click 作为事件名称，并且通过其他一些代码将另一个单击处理程序添加到目标元素然后当您使用.off() 时，它也会删除所有其他处理程序，而不仅仅是我们正在寻找的处理程序...如果您使用命名空间，您可以从中逃脱