Question

我正在尝试创建一个jquery对话框确认框。在下面的情况中，当我单击“单击确认框”时，将出现对话框。当用户选择确定或取消时，这应该消失，将关于按下的按钮的信息传递给调用功能。

我基本上通过以下更改从单独的解决方案中复制粘贴下面的代码：我从另一个函数内部调用myConfirm - 单击“click for ..”时调用的函数。我不只是想在页面加载时出现对话框（这似乎是我见过的大多数例子的情况）。结果是对话框根本不显示。此外，如果我直接在脚本中调用myConfirm，那么当我按下按钮时它不会关闭。我试过“关闭”而不是“破坏”

HTML

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>

<a id = "confirm"> click for confirm box</div>

脚本

<script>
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
        $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
            draggable: false,
            modal: true,
            resizable: false,
            width: 'auto',
            title: dialogTitle || 'Confirm',
            minHeight: 75,
            buttons: {
                OK: function () {
                    if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); }
                    $(this).dialog('destroy');
                },
                Cancel: function () {
                    if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); }
                    $(this).dialog('destroy');
                }
            }
        });
}

 $('[id=confirm]').click(function () { 
 myConfirm( 'Do you want to delete this record ?',
           function () {
                 alert('You clicked OK');
           },
        function () {
            alert('You clicked Cancel');
        },
        'Confirm Delete'
);

});
</script>

Answer 1

我已经尝试过使用jsfiddle.net的代码，但它运行正常。

您的错误是您在文档仍在加载时附加了事件处理程序。您必须使用ready()事件等待文档准备就绪。

此外，您可以使用#选择器按ID选择元素来简化一点：

$(document).ready(function() {
    $('#confirm').click(function () { ...
});

另一件事：为什么在执行okFunc和cancelFunc时启动计时器？这应该没有setTimeout：

OK: function () {
                   $(this).dialog('close');
                   if (typeof (okFunc) == 'function') { okFunc(); }
                },

Answer 2

事实证明它没有用，因为另一个脚本，这行包含一个旧的js源：

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

删除该行会使另一件事和对话框工作。

另外，我遵循了curtisk的建议，这很好，只是不足以解决问题。

Jquery对话框确认框：当用户单击元素时显示它

2 个答案: