Question

我有一个id为registerModal的div。我想在div中禁用所有'click'事件。例如，我有以下内容：

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

</a>

以及以下内容：

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

});

我尝试过：

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

但这没有成功。是否有其他方法可以禁用子元素div上的所有点击？

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");

同样，选择应针对实际所需的元素。

Answer 2

尝试

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

Answer 3

要设置每个并验证，我总是在循环中进行。如下：

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

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

所有答案都是实用的，但我倾向于注意到使用$ .each进行多个事件处理时更稳定的行为。

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

3 个答案: