Question

我有一个对话框（不是外部的html），当我点击页面上的一个按钮时会显示该对话框，如果包含该对话框的html是要访问的第一个页面，但是如果该文件是由单击另一个页面的href，单击按钮时对话框不会显示。

以下是包含对话框的页面的代码...即使这不是第一个要访问的页面，按钮的单击事件中的警报也会显示，但对话框没有显示。

<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>

    <!-- Page starts here -->
    <div data-role="page" data-theme="b" id="page1">
        <div data-role="header" id="hdrMain" name="hdrMain"
            data-nobackbtn="true">
            <h1>Test screen</h1>
        </div>
        <div data-role="content" id="contentMain" name="contentMain">
            <div id="fullnamediv" data-role="fieldcontain">
                <label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
                    Name*</label> <input id="fullname" name="fullname_r" type="text" />
            </div>
            <div id="submitDiv" data-role="fieldcontain">
                <a id="buttonSave" name="buttonSave" href="#" data-role="button"
                    data-inline="true">Save</a>
            </div>
        </div>
        <!-- contentMain -->
        <div data-role="footer" id="ftrMain" name="ftrMain"></div>
        <script>
            $("#page1").bind("pagecreate", function() {
                $('#buttonSave').click(function() {
                    alert("aaaa");
                $.mobile.changePage('#successdiv', {
                    transition: 'pop',
                    reverse: false,
                    changeHash: true
                });
                    alert("after change");
                    return true;
                });
            });
        </script>

    </div>
    <!-- page1 -->

    <div data-role="dialog" data-theme="a" id="successdiv">
        <div data-role="header" data-theme="f">
            <h1>Error</h1>
        </div>
        <div data-role="content">
            <p>This is Page 2</p>
            <button type="submit" data-theme="e" name="successok"
                value="submit-value" id="successbutton">Close Dialog</button>
        </div>
    </div>
    <!-- Page ends here -->
</body>

</html>

Answer 1

您使用的是jQuery Mobile v1.0，但同时您将错误的参数传递给$.mobile.changePage，就好像它是v1.0 alpha一样。不确定它是否解决了您的问题但值得尝试：

$.mobile.changePage('#successdiv', {
    transition: 'pop',
    reverse: false,
    changeHash: true
});

Answer 2

当我通过hrefs从一个jquery移动页面跳转到另一个时，我必须将rel属性设置为external，如下所示：

<a href="page2.html" rel="external">page2</a>

Answer 3

dfsq是正确的，当您从另一个页面链接到此页面时，仅加载div [data-role =“page”]。我建议将对话框移动到自己的html文件中并通过

打开它

<a href="your_dialog.htm" data-role="dialog">open dialog</a>

或

$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});

使用mobile.changepage的Jquerymobile对话框在第二页上不起作用

3 个答案: