将回调函数传递给onclick事件

Question

我已经尝试了一段时间了，尝试了很多方法。它还是不能工作。

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>&rarr; &nbsp; Icon Box &nbsp; &larr;</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");});    

理论上，我想让它在用户点击弹出窗口中的确认后发出警报……任何帮助都是非常感谢的。

其到控制台的日志‘回调未定义’

Answer 1

这是一个典型的作用域问题，当您将字符串附加到正文后，用户单击div时，onclick将尝试触发一个名为window.callback()的函数。而不是使用内联javascript，这通常不是一个好主意，总之是在html创建之后绑定click处理程序。

...
        // 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);
}

Answer 2

我会使用click()，而不是尝试将回调函数放入函数中。

$('.right_button').on('click', function() {
    alert("finally");
});

Answer 3

我甚至不知道从哪里开始告诉你要改变什么，除了所有的东西。首先，我将实际创建该div作为页面的一部分，并将其隐藏。当它应该显示的时候；您可以简单地执行$('#standard-modal').show();。然后，您可以按照其他答案中的建议进行操作，例如：

$('#cancel-btn').click(function(){
    alert('your message');
});

如果您仍然有问题，请查看jqueryUI http://jqueryui.com/demos/dialog/