本文介绍了换页后不会触发Pageshow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jQuery Mobile，并且在用户点击家中的按钮后，我想将浏览器重定向到另一个页面。 为此，我写道：
$。mobile.changePage（album-search-results.html， { data：{area：searchArea，value：searchValue}， transition：pop}）;它工作正常，它加载正确的页面，甚至在URL上输入正确的值。不幸的是，pageshow事件没有被触发：
<！DOCTYPE html> < html> < head> < meta name =viewportcontent =width = device-width，initial-scale = 1> < script src =code.jquery/jquery-1.8.2.min.js>< / script> < script src =code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.js>< / script> < link rel =stylesheethref =code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.css/> < / head> < body> < div data-role =pagedata-theme =did =SearchResults> < div data-role =header> < h1>聚合器< / h1> < / div> < div data-role =content> < / div> < / div> < script type =text / javascript> $（＃SearchResults）。on（pageshow，function（event，ui）{ console.log（ui.prevPage）; }）; < / script> < / body> < / html>当我从前一页加载该页面时，控制台始终为空。哪里不对？ 感谢解决方案解决方案
解决方案很简单，在页面div内移动脚本块。在你的情况下，脚本块被丢弃。基本上像这样改变它：
发件人：
<身体GT; < div data-role =pagedata-theme =did =SearchResults> < div data-role =header> < h1>聚合器< / h1> < / div> < div data-role =content> < / div> < / div> < script type =text / javascript> $（＃SearchResults）。on（pageshow，function（event，ui）{ console.log（ui.prevPage）; }）; < / script> < / body>收件人：
<身体GT; < div data-role =pagedata-theme =did =SearchResults> < div data-role =header> < h1>聚合器< / h1> < / div> < div data-role =content> < / div> < script> $（document）.on（pageshow，＃SearchResults，function（event，ui）{ console.log（ui.prevPage）; }）; < / script> < / div> < / body>示例：
索引.html
<！DOCTYPE html> < html> < head> < title> jQM Complex Demo< / title> album-search-results.html <！DOCTYPE html> < html> < head> < meta name =viewportcontent =width = device-width，initial-scale = 1> < script src =code.jquery/jquery-1.8.2.min.js>< / script> < script src =code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.js>< / script> < link rel =stylesheethref =code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.css/> < / head> < body> < div data-role =pagedata-theme =did =SearchResults> < div data-role =header> < h1>聚合器< / h1> < / div> < div data-role =content> < / div> < script> $（document）.on（pageshow，＃SearchResults，function（event，ui）{ console.log（ui.prevPage）; }）; < / script> < / div> < / body> < / html>
I am using jQuery Mobile and I would like to redirect the browser to another page, after the user clicked on a button on the home. To do this I wrote:
$.mobile.changePage("album-search-results.html",{ data:{area:searchArea, value:searchValue}, transition: "pop" });And it works fine, it loads the correct page and it even puts the right values on the URL. Unfortunately the pageshow event is not triggered:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="code.jquery/jquery-1.8.2.min.js"></script> <script src="code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <link rel="stylesheet" href="code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> </head> <body> <div data-role = "page" data-theme = "d" id = "SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> </div> <script type="text/javascript"> $("#SearchResults").on("pageshow",function(event, ui){ console.log(ui.prevPage); }); </script> </body> </html>The console in always empty when I load this page from the previous one. What is wrong? Thanks
解决方案Solution
Solution is simple, move script block inside a page div. In your case script block is discarded. Basically change it like this:
From :
<body> <div data-role = "page" data-theme = "d" id = "SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> </div> <script type="text/javascript"> $("#SearchResults").on("pageshow",function(event, ui){ console.log(ui.prevPage); }); </script> </body>To :
<body> <div data-role="page" data-theme="d" id="SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> <script> $(document).on("pageshow","#SearchResults",function(event, ui){ console.log(ui.prevPage); }); </script> </div> </body>Example:
index.html
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <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="code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> <script src="code.jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> $(document).on('click', '#change-page', function(){ $.mobile.changePage("album-search-results.html",{ data:{area:"asda", value:"1"}, transition: "pop" }); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> <a data-role="button" id="change-page">Change Page</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>album-search-results.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="code.jquery/jquery-1.8.2.min.js"></script> <script src="code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <link rel="stylesheet" href="code.jquery/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> </head> <body> <div data-role="page" data-theme="d" id="SearchResults"> <div data-role = "header"> <h1>Aggregator</h1> </div> <div data-role = "content"> </div> <script> $(document).on("pageshow","#SearchResults",function(event, ui){ console.log(ui.prevPage); }); </script> </div> </body> </html>
更多推荐
换页后不会触发Pageshow
发布评论