如何禁用div子元素上的所有onClick事件？

Question

我有一个id为registerModal的

元素。我想禁用该

内的所有“click”事件。例如，我有以下内容：

<a id="instagram-login-btn" class="inst-btn" href="">

</a>

并且以下内容：

$('#instagram-login-btn').on('click', function (event) {

});

我尝试做：

$('#registerModal').off('click', '**');

但这并没有奏效。有其他方法可以禁用子元素div上的所有点击事件吗？

- adit

---

可能是重复的问题：如何使用JQuery删除父元素的所有子元素的事件处理程序 - j08691

Answer 1

使用事件委托，但要在存在类的情况下禁用它。

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn:not(.disabled)", function(event) {
    // the handler
});
modal.on("click", "#another_element:not(.disabled)", function(event) {
    // the handler
});

然后要禁用它们，添加disabled类。

$("#registerModal *").addClass("disabled");

删除该类以启用。

$("#registerModal *").removeClass("disabled");

这些代码会在所有嵌套元素上添加或删除类，但你的实际代码可以更有针对性。

---

另一种不需要使用类的方法是绑定处理程序以停止事件传播到嵌套元素。

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn", function(event) {
    // the handler
});
modal.on("click", "#another_element", function(event) {
    // the handler
});

然后要禁用它们，使用处理程序停止冒泡。

$("#registerModal *").on("click", function(event) { event.stopPropagation() });

并删除处理程序以启用。

$("#registerModal *").off("click");

再次强调，选择应该针对实际需要的元素。

- user2736012

---

我还想提一下，我确实喜欢这个想法。我们在处理程序中经常使用委托。因此，对于这种情况，你也可以使用类更改，例如类切换，然后回调绑定等等，这是一种干净的方式。 - Casey ScriptFu Pharr

Answer 2

尝试

$('#registerModal').find('*').addBack().off('click',);

- Arun P Johny

---

我该如何重新打开它们？ - adit

@adit 在这种情况下，你不能再次打开它... 你需要重新注册所有事件处理程序。 - Arun P Johny

好的，那不是我想要的。 - adit

@adit 如果是这样，你就不能使用.off，你需要在每个点击处理程序中处理禁用状态。 - Arun P Johny

Answer 3

为了设置每一个并进行验证，我总是使用循环。例如以下代码：

  $('#registerModal').find("*").each(function(i,e)
  {

      $(this).unbind("click");
  });

所有的答案都是实用正确的，但我倾向于使用$.each实现多事件处理以获得更稳定的行为。

- Casey ScriptFu Pharr