我使用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
发布评论