Question

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

Answer 1

我花了一些时间研究相同的内容，因为JQM文档目前还不是很详细。以下解决方案对我来说很好：

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

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

Answer 2

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

Answer 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事件。   此事件在本页底部详细说明。

Answer 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仅在首次加载页面时启动

Answer 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＆＃34;页面＆＃34;进行html文件时，我发现这特别有用。在他们中。我设置了我的整个shebang的实际初始化代码在我的主页面（文件）然后所有其他子页面都有一个pagecreate处理程序，它检查初始化代码是否已经触发，如果没有，是一个$ .mobile.changePage（＆＃34; #mainpage＆＃34;）。工作得很好。

Answer 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函数。

Answer 7

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

jQuery mobile $（document）.ready等效

7 个答案: