25

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

4

7 回答 7

19

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

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

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

于 2011-04-12T06:42:37.863 回答
14

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

于 2011-11-19T06:36:48.047 回答
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 事件。此事件在本页底部有详细说明。

于 2012-08-14T18:31:21.710 回答
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仅在第一次加载页面时开始
于 2011-04-12T06:53:47.083 回答
3

每次显示时都会调用所有 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")。工作得相当好。

于 2011-09-04T16:43:54.067 回答
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 函数。

于 2012-02-26T21:03:17.013 回答
0

它相对简单。我想我理解你的问题，你想让那个事件只触发一次而不是重复，对吗？如果是这种情况，请这样做

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

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

于 2019-01-09T22:32:01.463 回答