Question

我有一个按钮列表来更改论坛（每个按钮包含一个唯一的data-mod属性值）。我写了一个jquery脚本来处理最后点击的按钮并通过ajax将其值发送到php数据库处理程序，ajax还发送自定义警报确认是否主持人真的想要执行操作（如果没有，警报关闭且没有任何反应，否则，调用回调函数。）

然而，我遇到了这个脚本的奇怪行为，它考虑到这样一个事实，即使我取消确认，下一个确认的警报将根据我点击按钮的次数触发回调函数。我想要的是回调函数在最后一次确认的操作时被触发一次。

$(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"));
})
});

如果对错误的描述不够清楚，我写了一个简化的小提琴，以便您可以对代码进行更改：here。

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

提前致谢！

Answer 1

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

因此，每次弹出窗口时，都会将新的单击函数绑定到“是”按钮，当您最终单击它时，所有绑定的函数都将触发。

  //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();
  });

对于解决方案，只需将click事件绑定到Yes或No（不是每次单击一个按钮），将最后一个按钮存储在全局变量（或任何属性或任何元素）中并在您的内容中检索它回调函数。

$(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(...) {...});

调用此一次，即使在此调用后动态创建的警报窗口也可以使用。

jQuery click事件奇怪的行为

1 个答案: