我在.net和JQM中使用母版頁編寫了兩個頁面。但是當我重定向到第二頁時，JQM滑動控件在沒有刷新的情況下不起作用。此外，任何控件或函數（如簡單alert（）都不起作用。我分享我的代碼：jquery mobile需要刷新才能正常工作

母版頁：

<%@ 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>

我想用母版頁使用在每一頁的刷卡控制，但是當我去Home.aspx從Slide.aspx用左滑動面板，滑動控制不起作用。當我刷新頁面時，它就起作用了。按鈕控制（例如）也是一樣。我怎樣才能使它工作？是否有關「pageinit」的問題？那麼document.ready（）呢？我嘗試了所有可能的解決方案，但失敗了謝謝。

來源

2013-07-16 JoshuaJeanThree

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 changepage後未觸發] [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

使用相對=「外部」在您的按鈕，你正在使用，以改變頁面元素的每。正因爲如此，ajax不會用於頁面加載，而您的jQuery Mobile應用程序會像普通的Web應用程序一樣運行。不幸的是，這不是一個好的解決方案。

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

正式文件，尋找一個章節：Linking without Ajax

現實的解決方案

現實的解決方案將使用解決方案2。但是，與解決方案2，我會用同樣的index.js文件並初始化它裏面每一個可能的其它頁面的HEAD。

來源

2013-07-16 12:44:41 Gajotres

美麗的答案:) +1 – krishgopinath

把腳本調用塊內：

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

... your script 

</div>

如果您正在加載通過AJAX頁面，標題將被處理只需一次（或刷新）。

來源

2013-07-16 12:35:36 melancia

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

回答

jQuery Mobile的如何處理頁面改變

解決方案1 ​​

解決方案2

解決方案3

現實的解決方案

相關問題

解決方案1