javascript - JQuery Mobile 对话框页面无法正常工作

Question

在我的代码对话框页面和后退按钮不起作用..我正确包含 jquery.mobile-1.4.4.min.css、jquery.js 和 jquery.mobile-1.4.4.min.js 链接我的 2 个页面。 谁能指出我在这里做错了什么......

我的index.html

 <!-- page 1-->
< div data-role="page" id="home" data-theme='b' data-dom-cache="true">
  < div data-role="header" data-theme='a'>
      < h1>My first Jquery</h1>
  < /div>
  < div data-role="content">
    < a href="page2.html" data-role="button">Take Me to Page 2</a>
      < a href="page2.html" data-role="button">Take Me to Page 2</a>
      < a href="#dialog" data-role="button">dialog</a>
  < /div>
  < div data-role="footer" data-theme='a' data-position="fixed">
      < h1>All Right Reserved</h1>
  < /div>
< /div>



<!-- dialog-->

< div id="dialog" data-role="dialog" >
< div data-role="header" data-theme='a'>
    < h1>header pf dialog</h1>
< /div>
< div data-role="content">
    < a href="#" data-role="button">Back</a>
< /div>
< div data-role="footer" data-theme='a' data-position="fixed">
    < h1>All Right Reserved</h1>
< /div>
< /div>

这是我的page2.html

< div data-role="page" id="home" data-theme='a'>
< div data-role="header" data-theme='a'>
    < h1>My first Jquery</h1>
< /div>
< div data-role="content">
    < a href="#" data-role="button" data-rel="back" data-theme="b">Go Back</a>
    < a href="#dialog" data-role="button">dialog</a>
< /div>
< div data-role="footer" data-theme='a' data-position="fixed">
    < h1>All Right Reserved</h1>
< /div>
< /div>

Answer 1

您需要为后退按钮添加data-rel="back"。

尝试这样

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

<!-- page 1-->
<div data-role="page" id="home" data-theme='b' data-dom-cache="true">
    <div data-role="header" data-theme='a'>
         <h1>My first Jquery</h1>

    </div>
    <div data-role="content"> <a href="page2.html" data-role="button">Take Me to Page 2</a>
 <a href="page2.html" data-role="button">Take Me to Page 2</a>
 <a href="#dialog" data-role="button">dialog</a>

    </div>
    <div data-role="footer" data-theme='a' data-position="fixed">
         <h1>All Right Reserved</h1>

    </div>
</div>
<!-- dialog-->
<div id="dialog" data-role="dialog">
    <div data-role="header" data-theme='a'>
         <h1>header pf dialog</h1>

    </div>
    <div data-role="content"> <a href="#" data-role="button" data-rel="back">Back</a>

    </div>
    <div data-role="footer" data-theme='a' data-position="fixed">
         <h1>All Right Reserved</h1>

    </div>
</div>

引用此FIDDLE DEMO