javascript 将回调函数传递给 onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9025579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
passing callback function into onclick event
提问by Johnny Craig
Ive been messing with this a while and have tried numerous ways. It still wont work.
我一直在搞这个，并尝试了很多方法。它仍然行不通。
function popupConfirm(widtH, texT, callback){
var top=(window.innerHeight/2) - 100;
var left=(window.innerWidth/2) - (widtH/2);
var r="<div id='standard-modal' style='width:"+widtH+"px;top:"+top+"px;left:"+left+"px;'>";
r+="<div id='standard-modal-header' style='width:"+(widtH-4)+"px;'>";
r+="<strong>→ Icon Box ←</strong>";
r+="</div>";
r+="<div id='standard-modal-message' style='width:"+(widtH-30)+"px;'>"+texT+"</div>";
r+="<div id='button_wrapper'><div id='standard-modal-button' class='left_button' onclick='$(\"#standard-modal\").remove();' >CANCEL</div>";
// following line attaches callback to onclick event
r+="<div id='standard-modal-button' class='right_button' onclick='callback();' >CONFRIM</div></div>";
r+="<div style='clear:both;'></div></div>";
$('body').append(r);
}
popupConfirm(300,'blah blah' , function(){alert("finally");});
in theory, i want it to do the alert once the user clicks confirm in my popup... any help is appreciated.
理论上，一旦用户在我的弹出窗口中单击确认，我希望它发出警报......感谢任何帮助。
its logs to the console 'callback is not defined'
它的日志到控制台“未定义回调”
采纳答案by JaredMcAteer
This is a classic scoping problem, when you append your string to the body then the user clicks on the div the onclick is trying to fire a function called window.callback(). Instead of using inline javascript which isn't a good idea in general anyways is bind the click handler after the html is created.
这是一个经典的范围问题，当您将字符串附加到正文时，然后用户单击 div，onclick 试图触发一个名为window.callback(). 在创建 html 之后绑定点击处理程序，而不是使用通常不是一个好主意的内联 javascript。
...
// following line attaches callback to onclick event
r+="<div id='standard-modal-button' class='right_button'>CONFRIM</div></div>";
r+="<div style='clear:both;'></div></div>";
$('body').append(r);
$('#standard-modal-button').bind('click', callback);
}
回答by John Fable
I would use click() instead of trying to put the callback in your function.
我会使用 click() 而不是尝试将回调放在您的函数中。
$('.right_button').on('click', function() {
alert("finally");
});
回答by Hyman
I don't even know where to begin telling you what to change, except for everything. First I'd start off actually creating that divas part of the page and hide it. When it should be shown; you can simply do $('#standard-modal').show();. You can then do what has been suggested in other answers like :
我什至不知道从哪里开始告诉你要改变什么，除了一切。首先，我会开始实际创建它div作为页面的一部分并隐藏它。什么时候应该显示；你可以简单地做$('#standard-modal').show();。然后，您可以执行其他答案中建议的操作，例如：
$('#cancel-btn').click(function(){
alert('your message');
});
If you are still having issues, check out jqueryUI http://jqueryui.com/demos/dialog/
如果您仍有问题，请查看 jqueryUI http://jqueryui.com/demos/dialog/
回答by André Al?ada Padez
a bit dangerous but:
有点危险但是：
r+="<div id='standard-modal-button' class='right_button' onclick='eval('(" + callback.toString() + ")()');' >CONFRIM</div></div>";
