jQuery Mobile $(document).ready等价的方法

Question

jQuery Mobile $(document).ready等价的方法

ajaxjquery-mobiledocument-ready

25

在ajax导航页面中，用于执行初始化javascript的经典"document ready"表单根本不会触发。

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

- Fabio B.

7个回答

14

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

- Crashalot

12

$(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事件。详细信息请参见本页底部的文档。

- Random78952

5

如果你希望代码在特定页面上运行（我敢打赌你是这种情况），你可以使用这种模式：

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

您可以使用的事件：

pagebeforeshow 在转换之前开始
pageshow 在转换后立即开始
pagecreate 仅在页面首次加载时开始

- naugtur

3

每次显示页面时都会调用所有的pageshow和pagebeforeshow事件。如果你想要在第一次发生某些事情，可以这样做：

  $('#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文件时，我认为以下做法特别有帮助。我将整个初始化代码都放在了我的主页（文件中的一个页面）中，然后所有其他子页面都有一个pagecreate处理程序，用于检查初始化代码是否已经触发，如果没有，则执行$.mobile.changePage("#mainpage")。这种方法效果相当不错。

- Joe Bedurndurn

在我看来，这是目前为止最好的解决方案。您可以处理随机页面，而不仅仅是像其他答案中那样特定的URL /文件！-- 但是，如果您在着陆页中没有定义相应的函数（使用ajax /未使用rel =“external”加载页面时），则您的解决方案将无法正常工作。您可能需要在<div data-role =“page”>中定义JS，因为似乎JQM仅使用ajax加载页面容器。我的其他脚本不会以这种方式执行。-- 我不确定这里使用die()的用途！ - Smamatti

更正：您对于使用die()来防止事件处理程序的多次执行是正确的！干得好，这确实帮助了我解决了一个关于Ajax导航问题的日历插件初始化。 - Smamatti

1

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

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

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

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

这样做将会移除ajax导航，进行完整页面重新加载，从而在你加载的页面上触发$(document).ready函数。

- Justin Saraceno

0

这相对来说很简单。我认为我理解了你的问题，你想让事件只触发一次而不是反复触发对吗？如果是这样，请像这样操作

$(document).one('pageinit', function(){ // 在这里编写你的代码 })

这样一来，'pageinit'事件只会发生一次。如果你想更多地了解one()jQuery方法，请查看此处。

- Nicholas Mberev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jura Khrapunov · Accepted Answer

由于JQM文档在这一点上不是非常详细，我花了一些时间研究了同样的问题。下面的解决方案对我来说很好用：

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

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