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

Answer 2

将函数fB更改为：

function fB() {
  $("#a, #b, #c").off("click");
  ... 
  //Does its own unique AJAX request
}

单击事件上的Javascript在函数内不起作用但在document.ready（）中起作用

2 个答案: