头文件中的jquery对话框无法正常工作

Question

我遇到了Jquery对话框的问题。我的目的是显示一条警告消息，通知用户，当用户在HTML表单中进行一些更改并尝试通过单击任何超链接离开页面时。但是当我更改表单值并单击页面中的任何超链接时，jquery对话框不会出现。

注意事项：

此代码位于主ftl文件中，所有其他ftl文件都将注入此文件。 我在另一个页面中有相同的代码，当用户在对表单字段进行一些更改后单击页面中的取消按钮时，将显示对话框。 我的if条件中的正常java脚本警报（请参阅下面的代码）正在显示，但是jquery对话框没有出现。

感谢您的帮助，并提前致谢。

CSS包含

<title><@tiles.getAsString name="title" ignore=true /></title>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"></meta>
        <meta http-equiv="content-type" content="text/xhtml; charset=utf-8"/>
        <@tiles.insertAttribute name='metas' ignore=true/>
        <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
        <link href="/styles/<@tiles.getAsString name='cssFilename' ignore=true/>" type="text/css" rel="stylesheet"/>
        <link href="/styles/<@tiles.getAsString name='cssErrorFilename' ignore=true/>" type="text/css" rel="stylesheet"/>
        <link href="/styles/login-style.css" type="text/css" rel="stylesheet"/>
        <link href="/styles/jtable-green.css" type="text/css" rel="stylesheet"/>
        <link href="/css/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>

脚本库包含

<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/js/ui/jquery-ui.js"></script>
<script type="text/javascript" src="/js/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="/js/jquery.jtable.js" ></script>

HTML Div Part

<div style="display:none">
    <div id="diaBack" class="dialog" title="Are You Sure!">
        <p>
            Are you sure you want to cancel the changes.
        </p>
    </div>
</div>

Jquery脚本部分

 $("a").click(function(e)
     {

            if ($("#UnsavedChanges").val() == "1") 
            {
                alert("You have done some changes");
                $("#diaBack").dialog({
                            modal: true, 
                            show: "slide",
                            dialogClass: "myTitleClass", 
                            width: defaultDialogWidth, 
                            buttons: {
                                "OK": function() { document.location =  "/tickerdefinitions"; },
                            }
                        });; 
            }
      });

Answer 1

感谢您的所有回复。做了几件事并且有效。

我收到脚本错误，说“defaultDialogWidth is undefined”。不知道为什么。因此将其更改为350.还使用e.preventDefault（）;。

替换警报行