Javascript Can'；无法在JQuery Mobile中以编程方式显示对话框_Javascript_Jquery_Jquery Mobile_Jquery Mobile Dialog

Javascript Can'；无法在JQuery Mobile中以编程方式显示对话框

javascript jquery jquery-mobile

Javascript Can'；无法在JQuery Mobile中以编程方式显示对话框,javascript,jquery,jquery-mobile,jquery-mobile-dialog,Javascript,Jquery,Jquery Mobile,Jquery Mobile Dialog,我试图在JQuery Mobile中显示一个数据类型为“dialog”的div，该div由Javascript事件触发。下面示例中的按钮单击纯粹是为了触发事件 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <script src="http://ajax.googleapis.com/aja

我试图在JQuery Mobile中显示一个数据类型为“dialog”的div，该div由Javascript事件触发。下面示例中的按钮单击纯粹是为了触发事件

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //$.mobile.changePage('#addCatForm');

            $('#createEvent').click (function () {
                console.log('Prove event fired');

                $.mobile.changePage('#addCatForm', {
                    transition: 'pop',
                    changeHash: false,
                    role: 'dialog'
                });
            });

        });
    </script>
</head>
<body>
    <div data-role="page" id="mainPage">
        <button id="createEvent">Create Event</button>
        <div data-role="dialog" id="addCatForm" data-theme="c">
            <p>here is some text</p>
            <div data-role="content">
                <input type="text" id="catText" data-theme="c"/>
                <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">

                <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
            </div>
        </div>
    </div>    
</body>


$（文档）.ready（函数（）{
//$.mobile.changePage（“#addCatForm”）；
$（'#createEvent'）。单击（函数（）{
log（'Prove event fired'）；
$.mobile.changePage（“#addCatForm”{
过渡：“流行音乐”，
changeHash:false，
角色：“对话”
});
});
});
创建事件
这里有一些文字
取消

console.log输出正确激发，但我似乎无能为力，无法显示对话框

谢谢你的帮助

谢谢，

工作示例：

对话框必须与页面处于同一级别，而不是页面的一部分。在这种情况下，我已将对话框移到页面外部。

您的结构应该如下所示，

数据角色=对话框

外部

数据角色=页面

<!-- Page -->
<div data-role="page" id="mainPage">
 <button id="createEvent">Create Event</button>
</div> 
<!-- /Page -->

<!-- Dialog -->
<div data-role="dialog" id="addCatForm" data-theme="c">
 <p>here is some text</p>
 <div data-role="content">
  <input type="text" id="catText" data-theme="c"/>
  <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
  <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
  </div>
 </div>
 <!-- /Dialog -->


创建事件
这里有一些文字
取消

将

对话框

div置于

数据角色=页面之外

。只能在

数据角色=page

中插入弹出窗口。将其视为

页面

，但改为使用

数据角色=对话框

。Omar和@Gajotres都有很好的答案。谢谢你，这很有效。但是，我一直试图关闭此对话框，$（'#addCatForm'）。dialog（'close'）函数的行为似乎与我预期的不一样。如何关闭此对话框并访问其DOM元素？谢谢。@JonRed当您关闭它时，它会返回到

#mainpage

？如果您想返回上一页，请将

数据rel=“back”

属性添加到

#addCatForm

div。@JonRed再次查看我的示例：我还将changeHash:false更改为changeHash:true。谢谢@Gajotres，我在收到你的评论的同时收到了。事实上，是changeHash属性导致了问题。我想把两个答案都标为“已接受”；-）接受这个答案是因为彻底的争论。谢谢你们。你们不应该使用$（document）。在jQM中，你们应该使用$（document）。在（“mobileinit”，function（）{//apply overrides here}）；

<!-- Page -->
<div data-role="page" id="mainPage">
 <button id="createEvent">Create Event</button>
</div> 
<!-- /Page -->

<!-- Dialog -->
<div data-role="dialog" id="addCatForm" data-theme="c">
 <p>here is some text</p>
 <div data-role="content">
  <input type="text" id="catText" data-theme="c"/>
  <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
  <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
  </div>
 </div>
 <!-- /Dialog -->