单击事件上的 JavaScript 不在函数内工作，但在 document.ready() 中工作

Question

在我的 document.ready() 中，我有几个按钮(a、b、c)，单击时它们会调用特定的方法。但是，当我单击按钮 (d) 时，我需要按钮 (a、b、c) 停止调用其特定方法，并且在单击时不执行任何操作。我尝试使用 PreventDefault() 方法，但它不起作用。请有人帮忙!预先感谢:)

$(document).ready(function(){ 
  ...

  // my buttons (a,b,c) which call method fA
  $("#a, #b, #c").on("click", fA);

  // my button (d) which call method fB
  $('#d').on("click", fB);

  ...
});

// When button (d) is clicked, I want buttons a,b,c to be non-clickable and this method should not be called.
function fA() { 
  // does a AJAX request
  $.ajax({
    url: ...,
    data: ...,
    dataType: "script"
  });
}

function fB() {
  $("#a, #b, #c").on("click", function(e) {
    e.preventDefault(); // THIS IS NOT WORKING!
  });
  ... 
  //Does its own unique AJAX request
}

Answer 1

当您调用 .on() 时，事件处理程序不会被替换，而是被添加。任何元素都可以有多个针对同一事件的事件处理程序。您已成功添加新的“点击”处理程序，但旧的处理程序仍然存在。

您可以使用.off() 删除特定事件的所有 处理程序。

$('#a, #b, #c').off("click");

如果您希望暂时禁用某些现有处理程序，您可以直接在涉及的元素上设置“disabled”属性(前提是它们是正确类型的元素)，或者使用您自己的某种标记机制。

作为“标记”以了解处理程序何时应该/不应该操作的示例，您可以使用一个类:

function fA() { 
  if ($(this).hasClass('inactive')) return;

  // does a AJAX request
  $.ajax({
    url: ...,
    data: ...,
    dataType: "script"
  });
}

function fB() {
  $("#a, #b, #c").addClass('inactive');
  // ...

当您希望“A”功能再次开始工作时，您可以删除该类:

$('#a, #b, #c').removeClass('inactive');