function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>我正在使用上面的代码来模仿默认的确认对话框窗口操作。该功能工作正常。但是单击按钮后，将调用 mytest() 并按预期使 div #mymodal 可见并带有两个按钮。但是，当您单击"is"或“否”按钮时，它会使 div 隐藏，但它会多次循环 MyConfirm 函数。在控制台中可以看到。谁能解释一下为什么我会收到这种奇怪的回复。我的目标是为 confirm() fn 创建一个替代方法。有返回值。
最佳答案
问题是您绑定(bind)了一个新的click 事件以在每次 执行MyConfirm() 函数时确认按钮。 click 事件绑定(bind)不会覆盖旧绑定(bind)，但会向该事件添加新功能。
您可以添加 $('input[id^=cfrm_]').off('click'); 以在绑定(bind)新绑定(bind)之前删除旧绑定(bind)。
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').off('click');
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>关于javascript - 带有 javascript 回调的 Jquery Click 事件被执行了不止一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45388345/