I wrote two pages using master page in .net and JQM. But when I redirect to second page, JQM swipe control does not works without a refresh. Besides, any control or function like a simple alert() does not work. I am sharing my code:
Master Page:
<%@ 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 (it is an empty page):
<%@ 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 (also this is an empty page):
<%@ 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>
I want to use the swipe control in every page using master page but when I go to Home.aspx from Slide.aspx by using left swipe panel, swipe control does not works. When I refresh the page, then it works. It is the same for a button control (for example). How can I make it work? Is the problem about "pageinit"? What about document.ready()? I had tried all possible solutions but failed. Thanks.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Solution 1
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
This is a quick solution but still an ugly one.
Working example can be found in my other answer here: [Pageshow not triggered after changepage][2]
Another working example: [Page loaded differently with jQuery-mobile transition][3]
Solution 2
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
<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>
In the end I will describe why this is a part of a good solution.
Solution 3
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Official documentation, look for a chapter: Linking without Ajax
Realistic solution
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.
Put the script call within the block:
<div data-role="page" id="demo-page" data-theme="d">
... your script
</div>
If you're loading the pages via AJAX, the headers will be processed just once (or on refresh).
来源：https://stackoverflow.com/questions/17676521/jquery-mobile-needs-a-refresh-to-work-properly