Question

我为自定义确认框编写了一些代码，当按下确认按钮（是按钮）时调用函数并将另一个函数作为参数传递，然后将其绑定到具有不同函数作为参数的2个不同按钮单击。例如：

$('#button1').click(function() {
    callFunction(function() { alert("test"); });
});
$('#button2').click(function() {
    callFunction(function() { alert("test2"); });
});

function callFunction(callback) {
    //code to display custom confirm box

    console.log(callback);

    $('.confirm-box .yes-button').click(function() {
        callback();
    });
}

一切都按预期发生，出现确认框，点击确认按钮我执行回调功能并发出警报＆＃34;测试＆＃34; （或＆＃34; test2＆＃34;取决于称为确认框的按钮）。当我点击button1发送一个警告＆＃34; test＆＃34;的函数，而不是确认我取消它（没有按预期发生），然后点击通过警报的按钮2（＆＃34; test2＆＃）时出现问题34;）作为回调函数。现在，当我按下“是”按钮而不是仅仅提醒＆＃34; test2＆＃34;时，我得到了＆＃34; test2＆＃34;和＆＃34;测试＆＃34;警报，即使我在console.log中记录的日志只是警告＆＃34; test2＆＃34;在那个按钮2点击时。似乎这些回调函数在某处堆叠，但我不知道在哪里以及为什么。

Answer 1

.click（）函数可以为一个元素添加多个处理程序，我认为这就是这里发生的事情。试试这个：

// ...
$('.confirm-box .yes-button').unbind('click').click(function() {
    callback();
});

这将删除之前的任何点击处理程序，然后再应用新的处理程序。

Answer 2

执行代码时：

$('.confirm-box .yes-button').click(function() {
    callback();
});

您正在将事件处理程序绑定到.yes-button元素。如果您运行该代码两次，它将绑定两个事件。等等。

一种解决方案是改为使用link，以便在第一次触发事件处理程序后将其删除：

$('.confirm-box .yes-button').one("click", function() {
    callback();
});

如果同时打开两个确认框或者有两个.yes-button元素，这当然会出现问题，但对于一个简单的用例，它可以正常工作。

Answer 3

您可以通过按类设置身份来实现，

zfs

为单个元素堆叠事件处理程序是一种不好的做法。

Answer 4

发生的事情是，每次单击一个按钮时，都会执行callFunction方法。它运行该代码块并将事件监听器应用于$（'。confirm-box .yes-button'）按钮。因此，单击您的按钮N次也将应用单击侦听器N次。一种解决方案是将函数存储在变量中。

不确定最终目标是什么，但这是一个解决方案。另一种解决方案是每次都删除按钮事件监听器。

var functionToCallOnYes = function() {};

$('#button1').click(function() {
  functionToCallOnYes = function() {
    alert("test");
  };

});

$('#button2').click(function() {
  functionToCallOnYes = function() {
    alert("test2");
  };
});


$('.confirm-box .yes-button').click(function() {
  console.log(functionToCallOnYes);
  functionToCallOnYes();
});

Answer 5

是的，额外的回调正在堆积起来。在$('button1').click(f)中，每次点击f时，都会调用函数button1，不带任何参数。在这种情况下，f是callFunction - 一个函数，每次调用时，它自己会将新处理程序附加到任何.confirm-box .yes-button元素。因此，在第N次点击时，您应该有N-1个警报。

为了使这样的事情更容易，您可以在JavaScript中按名称引用函数。因此，如果您有function test() { console.log("test"); };，则只需编写$(".confirm-box").click(test)一次，然后每次点击.confirm-box都会将test打印到控制台。

通常如果你有回调，其唯一目的是调用回调，你可以删除该回调。

jQuery回调函数累积

5 个答案: