jQuery 点击事件奇怪的行为

Question

我有一个按钮列表，用于对论坛进行更改(每个按钮都包含唯一的 data-mod 属性值)。我编写了一个 jquery 脚本来处理最后单击的按钮，并通过 ajax 将其值发送到 php 数据库处理程序，该处理程序还发送自定义警报确认主持人是否确实想要执行该操作(如果不是，警报将关闭并且什么也不会发生) ，否则调用回调函数)。

但是，我在使用此脚本时遇到了奇怪的行为，即即使我取消确认，下一个确认的警报也会根据我单击按钮的次数触发回调函数。我想要的是回调函数在最后一次确认的操作中被触发一次。

$(function() {
var btn;
// Custom callback function
function callback(clicked) {
    $("#result").append("<br/>").append(clicked);
}
// Custom alert function
var alert = {
   Check: function(fnc, clicked) {
      $("#alert").show();
      $("[data-alert=1]").click(function() {
        fnc(clicked);
        alert.Close();
      });
      $("[data-alert=0]").click(function() {
        alert.Close();
      });
    },
    Close: function() {
      $("#alert").hide();
      return false;
   }
};
// Custom button function
$("[data-mod]").click(function() {
   btn = $(this);
   return alert.Check(callback, btn.data("mod"));
})
});

如果错误的描述不够清楚，我编写了一个简化的 fiddle ，以便您可以在代码中进行更改:here .

此外，如果错误看起来有点令人困惑，这里有一张复制图片: I want only the last clicked button with the "Yes" confirmation button pressed

提前致谢!

Answer 1

原因是警报上显示的不同按钮的"is"和“否”按钮每次都是相同的。

因此，每次弹出窗口时，您都将一个新的单击函数绑定(bind)到"is"按钮，当您最终单击它时，所有绑定(bind)的函数都会触发。

  //This code is called everytime a button is clicked, so your Yes and No
  //Button will execute as many callbacks when clicked.
  $("[data-alert=1]").click(function() {
    fnc(clicked);
    alert.Close();
  });
  $("[data-alert=0]").click(function() {
    alert.Close();
  });

至于解决方案，只需将单击事件绑定(bind)到"is"或“否”一次(不是每次单击按钮时)，将最后单击的按钮存储在全局变量(或任何属性或任何元素)中，然后在您的回调函数。

$(function() {
var btn;
// Custom callback function
function callback(clicked) {
    $("#result").append("<br/>").append(clicked);
}
// Custom alert function
var alert = {
   Check: function(fnc, clicked) {
      $("#alert").show();
      $("#alert").attr("last-clicked", clicked);
    },
    Close: function() {
      $("#alert").hide();
      return false;
   }
};

//Only called once
$("[data-alert=1]").click(function() {
  callback($("#alert").attr("last-clicked"));
  alert.Close();
});
$("[data-alert=0]").click(function() {
  alert.Close();
});

// Custom button function
$("[data-mod]").click(function() {
   btn = $(this);
   return alert.Check(callback, btn.data("mod"));
})
});

另一种方法是使用 .off 来 remove all previous click bindings到您的按钮，如下所示:

  $("[data-alert=1]").off("click").click(function() {
    fnc(clicked);
    alert.Close();
  });

但缺点是它将删除所有对单击事件的回调，甚至是代码的另一部分可能放置在那里的回调。这就是为什么你最好这样做:

  $(document).on("click", "[data-alert=1]", function(...) {...});

调用一次，即使对于调用后动态创建的警报窗口也将起作用。