Question

在我的项目中，我使用的是自定义Confirmation dialogue，它使用callback的{{1}}方法。

自定义功能

JQuery

我将此功能称为

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(); } });时，它按预期工作，alrt（）将显示一次。当我第二次打电话给confirmMsg()时。它显示警报2次等等。

如何解决此问题？任何帮助都可以得到赞赏。示例小提琴链接是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自定义确认框回调错误

2 个答案: