5

我试图让一个数据类型为“对话框”的 div 显示在 JQuery Mobile 中，由 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>

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

任何帮助表示赞赏。

谢谢，

4

2 回答 2

5

工作示例：http: //jsfiddle.net/Gajotres/Jx9xM/

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

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

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

于 2013-04-11T10:52:02.697 回答
2

你的结构应该看起来像这样，data-role=dialog在外面data-role=page。

<!-- 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 -->
于 2013-04-11T10:55:33.900 回答