JQuery自定义确认框回调错误

问题描述：

在我的项目中，我使用的是自定义Confirmation dialogue，它使用callback方法JQuery。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(); 
    } 
});

的问题是，当我打电话confirmMsg()首次，它按预期工作和alrt（）将显示一次。当我第二次拨打confirmMsg()时。它显示警告2次等等。

我该如何解决这个问题？任何帮助，不胜感激。的例子小提琴链接JSFiddle

可能是问题'ajax'通话。你可以在这里写你的ajax电话吗？ –

@ParthTrivedi，这不是ajax的问题。它也显示没有Ajax的错误。 – Arun

你的问题是“callback（true）;'总是用相同的参数'true/false'调用？ –

答

这是因为这些代码行：

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

Thank you lots .. $（'＃conf-yes'）。off（'click'）; working .. :) – Arun

答

你在每一个结合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自定义确认框回调错误

相关推荐