jQuery mobile $(document).ready等效

在ajax导航页面中,执行初始化JavaScript的经典“文档就绪”forms根本不会触发。

什么是正确的方式来执行ajax加载页面中的一些代码?

(我的意思是,不是我的ajax …这是jQuery的移动页面导航系统,把我带到那个页面)

好吧,我怀疑这样的事情…非常感谢=)但是…它仍然不起作用,这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>mypage</title> <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" /> <script type="text/javascript" src="jquery-1.5.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script> <script type="text/javascript"> $('div').live('pageshow',function(event, ui){ alert('ciao'); }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Shopping Cart</h1> </div> <div data-role="content"> asd </div> </div> </body> 

我需要指定div ID吗?

6 Solutions collect form web for “jQuery mobile $(document).ready等效”

我花了一些时间研究相同的内容,因为JQM文档在这一点上不是很详细。 下面的解决scheme适合我:

 <script type="text/javascript"> $('div:jqmData(role="page")').live('pagebeforeshow',function(){ // code to execute on each page change }); </script> 

您必须实现自己的检查stream程,以防止多次初始化,因为上面的代码将在每次页面更改时运行

绑定到“pageinit”事件。 从JQM文档: http : //api.jquerymobile.com/pageinit/

$(document).ready()的最好等价物是$(document).bind('pageinit')

只需看一下jQuery Mobile文档: http : //jquerymobile.com/demos/1.1.1/docs/api/events.html

重要:使用$(document).bind('pageinit'),而不是$(document).ready()

你在jQuery中学到的第一件事就是调用$(document).ready()函数中的代码,这样一旦DOM被加载,所有的东西都会被执行。 但是,在jQuery Mobile中,Ajax用于在浏览时将每个页面的内容加载到DOM中,而DOM就绪处理程序仅对第一页执行。 要在加载和创build新页面时执行代码,可以绑定到pageinit事件。 这个事件在本页底部详细解释。

如果你想让代码在某个页面上运行(我敢打赌是这种情况),你可以使用这种模式:

 $('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){ // code to execute on that page //$(this) works as expected - refers the page }); 

您可以使用的事件:

  • pagebeforeshow在转换之前开始
  • 过渡后, pageshow启动
  • pagecreate只在第一次加载页面时开始

每次显示时,都会调用所有的pageshow和pagebefore show事件。 如果你想要第一次发生的事情,你可以做这样的事情:

  $('#pageelementid').live("pagecreate", pageInitializationHandler); 

然后在你的代码中:

  function pageInitializationHandler(event) { //possibly optional based on what exactly you're doing, //but keep it in mind in case you need it. //Also, this seems to need to be an exact duplicate of the //way you used it with the .live() method or jQ/jQM won't unbind //the right thing $('#pageelementid').die("pagecreate", pageInitializationHandler); //Do your actual initialization stuff } 

我发现这个特别有用,当你在做多个JQM“页面”的HTML文件。 我设置我的,所以整个shebang的实际初始化代码是在我的主要页面(文件),然后所有其他的子页面有一个pagecreate处理程序,检查是否初始化代码已被解雇,如果不是,做$ .mobile.changePage(“#mainpage”)。 工作得很好。

如上所述,pageinit事件可以工作。 但是,如果您遇到了多物理页面情况(例如:从index.html导航到mypage.html),则执行的function位于父级。

pageinit中的任何逻辑都必须属于父项,而不是加载的链接。 您无法在导航到的页面上调用函数,因为导航是通过JQM中的ajaxcallback处理的,并且您的子页面上的项目将超出范围。

在这种情况下,你可以使用data-ajax =“false”属性:

 <a href="mypage.html" data-ajax="false">My Page</a> 

这样做将删除ajax导航,做一个完整的页面重新加载,这反过来将触发$(document).ready函数在您正在加载的页面上。

  • 删除一个HTML标签,但保持innerHtml
  • jQuery.proxy()的用法
  • 主线程上的同步XMLHttpRequest已被弃用
  • Backbone.js和jQuery
  • 获得对刚刚附加到DOM的jquery元素的访问权限
  • jQuery:TAB键的键入?
  • 如何使用JQuery将数据放入Rails
  • jQuery的Ajax请求被取消而不被发送
  • 如何使用jQuery获取多个checkbox的值
  • 如何延迟5秒的function调用?
  • 试图加载jquery到篡改密钥脚本