jQuery mobile $(document).ready 等价物答案

【问题标题】：jQuery mobile $(document).ready equivalentjQuery mobile $(document).ready 等价物
【发布时间】：2011-08-03 02:46:11
【问题描述】：

在 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 吗？

【问题讨论】：

标签： ajax jquery-mobile document-ready

【解决方案1】：

我花了一些时间研究同样的问题，因为此时 JQM 文档还不是很详细。下面的解决方案对我来说很好：

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

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

【讨论】：

看看我的回答。从 JQM alpha3 开始工作。为了防止多次调用，您可以将事件更改为 pagereate
您想绑定到“pageinit”事件。从 JQM 文档中提取：jquerymobile.com/test/docs/api/events.html
重要：使用 $(document).on('pageinit')，而不是 $(document).ready() jquerymobile.com/test/docs/api/events.html
我认为这已经严重过时了。

【解决方案2】：

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

【讨论】：

【解决方案3】：

$(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 准备就绪处理程序仅对第一页执行。每当一个新页面加载并创建后，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。

【讨论】：

【解决方案4】：

如果您希望代码在某个页面上运行（我敢打赌就是这样），您可以使用以下模式：

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

您可以使用的事件：

pagebeforeshow 在过渡前开始
pageshow 在转换后立即开始
pagecreate 仅在第一次加载页面时开始

【讨论】：

【解决方案5】：

每次显示时都会调用所有 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")。效果不错。

【讨论】：

在我看来这是迄今为止最好的解决方案。您可以处理随机页面，而不仅仅是其他答案中的特定网址/文件！ -- 但是，如果您没有在登录页面中定义相应的功能（当使用 ajax/没有rel="external" 加载页面时），您的解决方案将不起作用。您可能需要在<div data-role="page"> 中定义 JS，因为 JQM 似乎只使用 ajax 加载页面容器。我的其他脚本不会以这种方式执行。 -- 我不确定die()在这里的用法！
更正：关于使用die() 来防止事件处理程序的多次执行，您是对的！干得好，这确实帮助我解决了一个 ajax 导航问题来初始化我的日历插件。

【解决方案6】：

如前所述，pageinit 事件确实有效。但是，如果您遇到了多物理页面的情况（例如：从 index.html 导航到 mypage.html），则执行的函数是在父级上。

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

在这种特殊情况下，您可以使用 data-ajax="false" 属性：

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

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

【讨论】：

【解决方案7】：

比较简单。我想我理解你的问题，你想让那个事件只触发一次而不是重复，对吗？如果是这样的话，就这样做吧

$(document).one('pageinit', function(){ // write your code here })

在这种情况下，'pageinit' 将发生一次。如果您想了解更多关于one() jQuery 方法的信息，请查看here

【讨论】：