个人中心
gpt4 book ai didi

jquery mobile 需要刷新才能正常工作

转载 作者：行者123 更新时间：2023-12-01 05:56:03 28 4
gpt4 key购买 nike

我使用.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 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>

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

可以在我的其他答案中找到工作示例:[页面更改后未触发页面显示][2]

另一个工作示例:[通过 jQuery 移动转换以不同方式加载页面][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 内初始化它。

关于jquery mobile 需要刷新才能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15648182/

28 4 0
文章推荐： jquery - 使用 Phonegap + jQuery Mobile 滚动
文章推荐： jquery - 将 Pinterest 按钮添加到 fancybox
文章推荐： jquery:遍历表将硬编码日期与Date.today()进行比较，然后删除日期
文章推荐： jquery 显示更多/更少有添加 html 标签的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com