JQuery自定义确认框回调错误

Question

在我的项目中，我使用了自定义 Confirmation dialogue，它使用了 JQuery 的 callback 方法。

自定义函数为

function conf_close() {
$('.conf-cont-main').remove();
}
function confirmMsg(message, callback)
{
    $('.conf-main').remove();
    var cont = '<div class="conf-cont-main"><div class="conf-main">\n\
    <span class="conf-close" onclick="conf_close()">X</span>\n\
    <div class="conf-head">\n\
    Confirm Action\n\
    </div>\n\
    <div class="conf-body">\n\
    ' + message + '\n\
    </div>\n\
    <div class="conf-button">\n\
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-yes">Yes</button>\n\
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-no">No</button>\n\
    </div>\n\
    </div></div>';
    $('body').prepend(cont);
    $(document).on('click', '#conf-yes', function()
    {
        callback(true);
    });
    $(document).on('click', '#conf-no', function()
    {
        callback(false);
    });
}

我将此函数称为

var c = confirmMsg('Are You Sure to Delete?', function(c) {
    if (c == true) {
        alert('true');
        conf_close();
        //ajax call
    }
    else{
        alert('false');
        conf_close();
    }
});

问题是，当我第一次调用 confirmMsg() 时，它按预期工作并且 alrt() 将显示一次。当我第二次调用 confirmMsg() 时。它显示警报 2 次，依此类推。

我该如何解决这个问题？任何帮助都将不胜感激。例如 fiddle link 是 JSFiddle

Answer 1

是因为这几行代码：

$(document).on('click', '#conf-yes', function()
{
    callback(true);
});
$(document).on('click', '#conf-no', function()
{
    callback(false);
});

您在每次调用时添加事件，因此它们运行多次。尝试更改为：

$('#conf-yes').off('click');
$('#conf-no').off('click');
$(document).on('click', '#conf-yes', function()
{
    callback(true);
});
$(document).on('click', '#conf-no', function()
{
    callback(false);
});

虽然设置你的 JS 可能会更聪明，因此它只添加一次事件（大概在调用该函数的时间之外），.off() 将删除以前的点击事件，所以当你再次添加它们，您将不会有重复项。

但是如果您想继续使用该代码，您也可以将其缩短一点：

$('#conf-yes').off('click').on('click', function()
{
    callback(true);
});
$('#conf-no').off('click').on('click', function()
{
    callback(false);
});

Answer 2

您在每次点击时多次绑定 click 事件，它会绑定新的点击。

你必须做

function conf_close() {
    $('.conf-cont-main').remove();
}
function confirmMsg(message, callback) {
    $('.conf-main').remove();
    var cont = '<div class="conf-cont-main"><div class="conf-main">\n\
    <span class="conf-close" onclick="conf_close()">X</span>\n\
    <div class="conf-head">\n\
    Confirm Action\n\
    </div>\n\
    <div class="conf-body">\n\
    ' + message + '\n\
    </div>\n\
    <div class="conf-button">\n\
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-yes" onclick="conf_click(true);">Yes</button>\n\
    <button class="btn btn-blue-3 btn-sm btn-flat" id="conf-no" onclick="conf_click(false);">No</button>\n\
    </div>\n\
    </div></div>';
    $('body').prepend(cont);      
}

function conf_click(arg) {
    callback(arg);
}

JQuery自定义确认框回调错误

JQuery custom confirm box callback error

jquery

confirm

caching

callback