带有 asp.net 的 jQuery UI 对话框 - 对象不支持属性或方法“对话框”

Question

我有一个使用母版页的 aspx 页面，当我尝试使用 jQuery UI 对话框时出现问题。

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="/Styles/SiteFramePage.css" rel="stylesheet" type="text/css" media="Screen"/>
<link href="Styles/ArrivalTemplate.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.12.1.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
    .DisabledCheckout
    {
        background-color:Gray;
        color:Black;
        Width:100%;
        font-weight:bold;
    }
    body.waiting
    {
        cursor: wait;
    }
    .no-close .ui-dialog-titlebar-close {
        display: none;
    }
</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/SMS_JClient.js" type="text/javascript"></script>

我的对话框的 div 如下：

<div id="ChckDgtDialog" title="Enter Check Digit">
     <table>
        <tr>
            <td id="ChckDgtDialogError"></td>
        </tr>
        <tr>
            <td id="ChckDgtDialogPrompt">Please enter the check digit on the container.</td>
        </tr>
        <tr>
            <td align="center"><input type="text" id="ChckDgtDialogTextBox" size="50" onkeypress="isChckDgtDialogSubmit(event)" /></td>
        </tr>
    </table>
</div>

我在页面底部还有一个脚本，用于将 div 设置为对话框。

$("#ChckDgtDialog").dialog({
        autoOpen: false,
        dialogClass: "no-close",
        width: 425,
        modal: true,
        buttons: {
            "Ok": checkDigitValidate,
            Cancel: function () {
                var dialogbox = $('#ChckDgtDialog');
                $(dialogbox).dialog("close");
            }
        },
        open: function () {
            stopTimer();
        }
    } );

Content1 中有一个较长的脚本标签，$(window).load() 将获取数据并构建一个带有按钮的表格。在该脚本块中，有以下语句应该打开对话框：

$(":button").click(function () {

Option = $(this).text();

if (Option == "Check In") {

    $("#ChckDgtDialog").dialog("open");

}
if (Option == "Check Out") {

    $("#ChckDgtDialog").dialog("open");
}});

（还有其他逻辑赋予 if 语句更多目的，试图仅显示与问题相关的内容） 但是，当单击按钮时，我们会收到错误消息：对象不支持属性或方法“对话框”。

我觉得奇怪的是，当我们在页面底部的脚本中设置对话框的所有属性时，没有问题。我可以说这部分正在工作，因为页面上看不到 div，如果我删除它。范围似乎有些问题，但我尝试移动在$(window).load() 中设置对话框属性的部分，因为理论上不应该在那时加载 jquery ui 脚本，但是我得到了错误在我尝试打开对话框之前就立即这样做了。

关于为什么单击按钮时我们没有可用的对话框有什么想法吗？我是 jquery 的新手，我想知道母版页或 asp.net 是否有一些东西可能会弄乱一些东西？

Answer 1

我认为，如果您将对话框初始化代码放在页面 onload 函数中，就可以解决问题。