【问题标题】：jquery mobile needs a refresh to work properlyjquery mobile 需要刷新才能正常工作
【发布时间】：2013-07-16 12:27:55
【问题描述】：

我在 .net 和 JQM 中使用母版页编写了两个页面。但是当我重定向到第二页时，JQM 滑动控件在没有刷新的情况下不起作用。此外，像简单的 alert() 这样的任何控件或功能都不起作用。我正在分享我的代码：

母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMaster.master.cs" Inherits="Password.Masters.UserMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

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

     <script type="text/javascript">
         $(document).on("pageinit", "#demo-page", function () {
             $(document).on("swipeleft swiperight", "#demo-page", function (e) {
                 if ($.mobile.activePage.jqmData("panel") !== "open") {
                     if (e.type === "swiperight") {
                         $("#left-panel").panel("open");
                     }
                 }
             });
         });
     </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div data-role="page" id="demo-page" data-theme="d">
        <div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner">
            <h1>Web Page</h1>
            <a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
        </div>

        <div data-role="panel" id="left-panel" data-theme="b">
            <!---->
            <ul data-role="listview" data-theme="d">
                <li data-icon="arrow-r" data-theme="b">Welcome
                    <asp:LoginName ID="LoginName1" runat="server" />
                </li>
                <li data-icon="home"><a href="../Pages/Home.aspx" data-rel="">Homepage</a></li>                

            </ul>
        </div>

        <div  data-role="content">
        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
        </div>

    </div>
</body>
</html>

Slide.aspx（它是一个空白页面）：

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Slide.aspx.cs" Inherits="Password.Pages.Slide" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">

     </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Home.aspx（这也是一个空页面）：

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Password.Pages.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">

     </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

我想在使用母版页的每个页面中使用滑动控件，但是当我使用左侧滑动面板从 Slide.aspx 转到 Home.aspx 时，滑动控件不起作用。当我刷新页面时，它就可以工作了。按钮控件也是如此（例如）。我怎样才能让它工作？是关于“pageinit”的问题吗？那么 document.ready() 呢？我尝试了所有可能的解决方案，但都失败了。谢谢。

【问题讨论】：

标签： jquery jquery-mobile master-pages

【解决方案1】：

jQuery Mobile 如何处理页面变化

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 加载其他页面。

首页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM。

这就是为什么您的按钮显示成功但点击事件不起作用的原因。在页面转换期间忽略父 HEAD 的相同点击事件。

这是官方文档：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到此描述。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。（jQuery Mobile 文档很大，但缺少很多东西）。

解决方案 1

在您的第二页和其他所有页面中，将您的 SCRIPT 标记移动到 BODY 内容中，如下所示：

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

这是一个快速的解决方案，但仍然是一个丑陋的解决方案。

工作示例可以在我的其他答案中找到：[Pageshow not trigger after changepage][2]

另一个工作示例：[使用 jQuery-mobile 转换以不同方式加载页面][3]

解决方案 2

将您的所有 javascript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 js 文件中，放入 HEAD。在加载 jQuery Mobile 后对其进行初始化。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

最后我将描述为什么这是一个好的解决方案的一部分。

解决方案 3

在您的按钮和用于更改页面的每个元素中使用 rel="external"。因此，ajax 不会用于页面加载，您的 jQuery Mobile 应用程序将像普通的 Web 应用程序一样运行。不幸的是，在您的情况下，这不是一个好的解决方案。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文档，找一章：Linking without Ajax

现实的解决方案

现实的解决方案将使用 解决方案 2。但与解决方案 2 不同的是，我会使用相同的 index.js 文件并在每个可能的其他页面的 HEAD 中对其进行初始化。

【讨论】：

漂亮的答案:) +1

【解决方案2】：

将脚本调用放在块内：

<div data-role="page" id="demo-page" data-theme="d">

... your script

</div>

如果您通过 AJAX 加载页面，标题将只处理一次（或刷新时）。

【讨论】：