jQuery mobile $(document).ready 等效项
在ajax导航页面中，用于执行初始化javascript的经典“文档就绪”表单根本不会触发。
在 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吗？
in ajax navigation pages, the classic "document ready" form for performing initialization javascript simply doesn't fire.
What's the right way to execute some code in an ajax loaded page?
(I mean, not my ajax... it's the jquery mobile page navigation system which brings me to that page)
Ok, I did suspect something like that... thanks a lot =) But... it still doesn't work, here's my code:
<!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>
Do I need to specify the div id?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我花了一些时间研究同样的问题，因为 JQM 文档目前还不是很详细。下面的解决方案对我来说效果很好：
您必须实现自己的检查流程以防止多次初始化，因为上面的代码将在每个页面更改上运行
I spent some time on researching the same since JQM docs are not very detailed at this point. Solution below works fine for me:
You have to implement your own checking flow in order to prevent multiple initialization since the code above will run on every page change
绑定到“pageinit”事件。来自 JQM 文档： http://api.jquerymobile.com/pageinit/
Bind to the "pageinit" event. From JQM docs: http://api.jquerymobile.com/pageinit/
$(document).ready()的最佳等效项是$(document).bind('pageinit')只需查看 jQuery Mobile 文档：http://jquerymobile.com/demos/1.1.1/docs/api/events .html
The best equivalent of
$(document).ready()is$(document).bind('pageinit')Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html
如果您希望代码在某个页面上运行（我敢打赌就是这种情况），您可以使用此模式：
您可以使用的事件：
pagebeforeshow在转换pageshow开始 转换后pagecreate仅在第一次加载页面时启动If you want the code to run on a certain page (I bet that's the case) you can use this pattern:
Events you can use:
pagebeforeshowstarts just before transitionpageshowstarts right after transitionpagecreatestarts only the first time page is loaded每次显示时都会调用所有 pageshow 和 pagebefore show 事件。如果您希望第一次发生某些事情，您可以执行以下操作：
然后在您的代码中：
当您处理其中包含多个 JQM“页面”的 html 文件时，我发现这特别有用。我进行了设置，以便整个 shebang 的实际初始化代码位于我的主页面（文件的）中，然后所有其他子页面都有一个 pagecreate 处理程序，用于检查初始化代码是否已触发，如果没有，则执行$.mobile.changePage("#mainpage")。效果相当好。
All the pageshow and pagebefore show events are called each time that it's displayed. If you want something that happens the first time, you can do something like this:
Then in later on in your code:
I found this particularly helpful when you're doing html files with multiple JQM "pages" in them. I set mine up so that the actual initialization code for the whole shebang is in my main page (of the file) and then all the other sub pages have a pagecreate handler that checks to see if the initialization code has fired and if not, does a $.mobile.changePage("#mainpage"). Works fairly well.
如前所述，pageinit 事件确实有效。但是，如果您遇到多物理页面情况（例如：从index.html 导航到mypage.html），则执行的函数将在父页面上执行。
pageinit 中的任何逻辑都必须与父级相关，而不是与正在加载的链接相关。您无法在导航到的页面上调用函数，因为导航是通过 JQM 中的 ajax 回调处理的，并且子页面上的项目将超出范围。
在这种特殊情况下，您可以使用 data-ajax="false" 属性：
这样做将删除 ajax 导航，重新加载整个页面，这反过来将在您的页面上触发 $(document).ready 函数重新加载。
As mentioned, the pageinit event does work. However, if you had the case of a multi-physical page situation (eg: navigating from index.html to mypage.html), the function that is executed is on the parent.
Any logic in the pageinit would have to be something pertaining to the parent, not the link being loaded. You couldn't call a function on the page your navigating to because navigation is handled via an ajax callback in JQM and items on your child page would be out of scope.
In this particular case, you could use the data-ajax="false" attribute:
Doing this will remove the ajax navigation, do a full page reload, which in turn will fire a $(document).ready function on the page you're loading.
比较简单。我想我理解你的问题，你想让该事件只触发一次而不是重复，对吧？如果是这种情况，请像这样
$(document).one('pageinit', function(){// 在这里写下你的代码
})
在这种情况下，'pageinit' 将发生一次。如果您想了解有关
one()jQuery 方法的更多信息，请查看此处It is relatively simple. I think I understand your problem, you want to have that event fire just once and not repeatedly right? If that is the case, do it like this
$(document).one('pageinit', function(){// write your code here
})
In that case the 'pageinit' will happen once. If you want to know more about the
one()jQuery method, check here