时间戳

首页 > 解决方案 > 对话框同时触发多个事件

jquery - 对话框同时触发多个事件

问题描述

.on("click")产生了多个事件，为什么？有人可以解释一下吗？ 

$("#office_holder_delete").on("click", function (event) {
  event.preventDefault();
  var $message = "Oops! Something went wrong while processing your request!";
  dialog($message, function () {
    alert("Yes");
  }, function () {
    alert("No");
  });
});

function dialog(message, yesCallback, noCallback) {
  $("#alert_worn").html(message);
  $(".alert").css("background-color", "#F00");
  $(".alert-content").css("display", "flex");

  $("#yes_button").on("click", function () {
    $(".alert-content").css("display", "none");
    $(".alert").css({"height": "200px"});
    $(".alert p").css("text-align", "center");
    yesCallback();
  });

  $("#no_button").on("click", function () {
    $(".alert-content").css("display", "none");
    $(".alert").css({"height": "200px"});
    $(".alert p").css("text-align", "center");
    noCallback();
  });
}

我预计每次“点击”只有一个“否”中的“是”，但如果我下次点击它会产生 2 次“是”或“否”。如果我第三次单击它会产生三次“是”或“否”。为什么？我不明白。我是 jQuery 的新手，对我来说，如果我调用一次函数，它必须产生一个响应。但在我的现实中，它看起来很奇怪！

标签： jqueryonclick

解决方案

每次调用该dialog函数时，它都会依次调用，在按钮上on设置另一个侦听器。因此，下次单击时，它会触发两次。

在函数外部全局设置它们，因此它们只设置一次。

推荐阅读