ajax jQuery mobile $(document).ready 等价物
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5622581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile $(document).ready equivalent
提问by Fabio B.
in ajax navigation pages, the classic "document ready" form for performing initialization javascript simply doesn't fire.
在 ajax 导航页面中，用于执行初始化 javascript 的经典“文档就绪”表单根本不会触发。
What's the right way to execute some code in an ajax loaded page?
在 ajax 加载的页面中执行一些代码的正确方法是什么？
(I mean, not my ajax... it's the jquery mobile page navigation system which brings me to that page)
（我的意思是，不是我的 ajax ......它是 jquery 移动页面导航系统，它把我带到了那个页面）
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?
我需要指定 div id 吗？
采纳答案by Jura Khrapunov
I spent some time on researching the same since JQM docs are not very detailed at this point. Solution below works fine for me:
我花了一些时间研究相同的内容，因为此时 JQM 文档还不是很详细。下面的解决方案对我来说很好用：
<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
// code to execute on each page change
});
</script>
You have to implement your own checking flow in order to prevent multiple initialization since the code above will run on every page change
您必须实现自己的检查流程以防止多次初始化，因为上面的代码将在每次页面更改时运行
回答by Crashalot
Bind to the "pageinit" event. From JQM docs: http://api.jquerymobile.com/pageinit/
绑定到“pageinit”事件。来自 JQM 文档：http: //api.jquerymobile.com/pageinit/
回答by Random78952
The best equivalent of $(document).ready()is $(document).bind('pageinit')
最好的等价物$(document).ready()是$(document).bind('pageinit')
Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html
看看 jQuery Mobile 文档：http: //jquerymobile.com/demos/1.1.1/docs/api/events.html
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
重要提示：使用 $(document).bind('pageinit')，而不是 $(document).ready()
您在 jQuery 中学习的第一件事是在 $(document).ready() 函数中调用代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。
回答by naugtur
If you want the code to run on a certain page (I bet that's the case) you can use this pattern:
如果您希望代码在某个页面上运行（我敢打赌就是这种情况），您可以使用以下模式：
$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
Events you can use:
您可以使用的事件：
pagebeforeshowstarts just before transitionpageshowstarts right after transitionpagecreatestarts only the first time page is loaded
pagebeforeshow刚好在过渡前开始pageshow转换后立即开始pagecreate仅在第一次加载页面时启动
回答by Joe Bedurndurn
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:
每次显示时都会调用所有 pageshow 和 pagebefore show 事件。如果你想要第一次发生的事情，你可以这样做：
$('#pageelementid').live("pagecreate", pageInitializationHandler);
Then in later on in your code:
然后稍后在您的代码中：
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
}
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.
我发现这在您处理包含多个 JQM“页面”的 html 文件时特别有用。我设置了我的，以便整个shebang的实际初始化代码在我的主页（文件的）中，然后所有其他子页面都有一个pagecreate处理程序，用于检查初始化代码是否已触发，如果没有，则执行$.mobile.changePage("#mainpage")。工作得相当好。
回答by Justin Saraceno
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.
如前所述，pageinit 事件确实有效。但是，如果您遇到多物理页面情况（例如：从 index.html 导航到 mypage.html），则执行的函数在父页面上。
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.
pageinit 中的任何逻辑都必须与父级有关，而不是正在加载的链接。您无法在导航到的页面上调用函数，因为导航是通过 JQM 中的 ajax 回调处理的，并且子页面上的项目将超出范围。
In this particular case, you could use the data-ajax="false" attribute:
在这种特殊情况下，您可以使用 data-ajax="false" 属性：
<a href="mypage.html" data-ajax="false">My Page</a>
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.
这样做将删除 ajax 导航，重新加载整个页面，这反过来会在您正在加载的页面上触发 $(document).ready 函数。
回答by Nicholas Mberev
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
})
$(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
在这种情况下，'pageinit' 将发生一次。如果您想了解有关one()jQuery 方法的更多信息，请查看此处
