Javascript on click事件在函数中不起作用，但在document.ready(）中起作用

Javascript on click event not working within a function but works in document.ready()

本文关键字：document 但在 ready 起作用 不起作用 click on 事件 函数 Javascript      更新时间：2023-09-26

在我的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
}

调用.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');

将函数fB更改为：

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