Question

如果我在我的开始页面上打开一个jquery移动对话框，如下所示：

@Html.ActionLink("DialogPage", "DialogPage", "Home", null, new {data_rel="dialog" })

然后使用X按钮关闭对话框，重新加载起始页面，我认为这是正确的行为。

但是，如果我导航到第二页，在第二页上以完全相同的方式打开一个jquery移动对话框，并使用X按钮关闭对话框，该对话框将导致第二页重新加载！

这很容易重现。这是一个错误还是在某种程度上是预期的行为？这让我疯狂了几天（甚至几周）。请帮帮我。

编辑：我不知道如何链接jsfiddle中的页面，但这里是我的源代码分为三个页面（粗体标题）：

首页：

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link type="text/css" href="Content/themes/base/jquery.mobile/jquery.mobile-1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
        });
    </script>
    <script type="text/javascript" src="Scripts/jquery.mobile/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-theme="c" data-role="header" data-position="inline" style="height: 70px; background-image: url('/Intranet/Mobile/Images/Bg_Main.png'); background-repeat: repeat-x">
        <h1>header</h1>
    </div>
    <h2>Jquery mobile dialog bug?</h2>
    <div data-role="content">
        <a href="../Dialog/Dialog" data-rel="dialog">First dialog without postback behavior</a>
        <br />
        <br />
        <a href="/SecondPage/TheSecondPage">Link to second page containing a dialog with postback</a>
    </div>

    <div data-role="footer" data-theme="c" class="ui-bar">
    </div>
</div>
</body>
</html>

第二页：

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<link type="text/css" href="../Content/themes/base/jquery.mobile/jquery.mobile-1.0.min.css" rel="stylesheet" />

<script type="text/javascript" src="../Scripts/jquery-1.6.4.min.js"></script>

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
    });
</script>

<script type="text/javascript" src="../Scripts/jquery.mobile/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-theme="c" data-role="header" data-position="inline" style="height: 70px; background-image: url('/Intranet/Mobile/Images/Bg_Main.png'); background-repeat: repeat-x">
<h1>
    header</h1>
</div>
<div data-role="content">
<a href="../Dialog/Dialog" data-rel="dialog">Dialog with postback behavior</a>
<br />
<br />
</div>
    <div data-role="footer" data-theme="c" class="ui-bar">
    </div>
</div>
</body>
</html>

对话框页面

<div data-role="content"  data-theme="a" >
This is the dialog.
</div>

如果我还有其他任何事情可以让这更容易，请告诉我。

编辑2：我认为这与以下内容有关： https://github.com/jquery/jquery-mobile/issues/3549#issuecomment-4060809 包含一个类似的例子。

Answer 1

我无法确定这是否是你的问题，但希望是这样。 :)在对话框页面中，确保您没有运行此javascript：

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
       // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
       // when navigating from a mobile to a non-mobile page), hence disabling it.
       $.mobile.ajaxEnabled = false;
    });
</script>

如果您禁用了Ajax，它会执行完整的回发，这会导致页面在您返回时刷新。

Mvc3 Jquery移动对话框导致回发错误？

1 个答案: