如何在 jquery mobile 中初始化页面？ pageinit 没有触发答案

【问题标题】：How to initialize pages in jquery mobile? pageinit not firing如何在 jquery mobile 中初始化页面？ pageinit 没有触发
【发布时间】：2011-11-24 12:48:45
【问题描述】：

在 jquery 移动页面上初始化对象的正确方法是什么？ events docs 表示使用“pageInit()”，没有该函数的示例，但给出了绑定到“pageinit”方法的示例（注意大小写差异）。但是，我在这个简单的测试页面中根本看不到事件触发：

<html>
 <body>  
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

  <div data-role="page" id="myPage">
    test
  </div>

  <script>
    $("#myPage").live('pageinit',function() {
        alert("This never happens");
    });
  </script>
 </body>
</html>

我错过了什么？我应该补充一点，如果您将 pageinit 更改为另一个事件，例如 pagecreate，则此代码有效。

---- 更新----

这个bug 在 JQM 问题跟踪器中被标记为“关闭”。显然，对于这是否正常工作存在不同意见。

【问题讨论】：

我正在使用 RC1，我遇到了完全相反的问题，我添加了 pageinit 来为 ajax 调用做事件绑定。每次加载页面时都会增加对 pageinit 事件方法的调用，例如如果我访问该页面三次，在第三次访问时，相同的方法会被调用三次。任何想法。
@SutikshanDubey 你有没有弄清楚为什么会这样？我也有同样的问题...
@JLaw 这是我关于 SO stackoverflow.com/questions/7741888/… stackoverflow.com/questions/7724959/… 的问题，我正在隐藏上进行杀戮事件。但我仍然对我正在使用的解决方案不满意。
@SutikshanDubey 我最近发现的一件事是，每次加载我的页面时，我都会无意中创建多个事件处理程序。我在“pageshow”处理程序中有一些代码会在“click”事件上触发。每次“pageshow”触发时，都会为“click”创建一个新的处理程序。因此，我的处理程序多次关闭。也许您遇到了类似的问题？您是否有多个处理程序在不知不觉中执行相同的任务？

标签： jquery-mobile

【解决方案1】：

当我在页面 div 中嵌入脚本时它开始工作：

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

使用 jQuery Mobile 1.0RC1

【讨论】：

可以确认此解决方案也适用于 1.0 版本。不知道是什么问题。
这似乎只是在使用 jQuery Mobile 时养成的一个好习惯 - 将与页面对应的所有内容放入您的
中，然后不管是否有效片段是否使用 AJAX 加载。尽管在以后的版本中已经针对这种每页功能进行了更新，尽管就 XHTML 而言它可能看起来并不“干净”，但它更符合 JQM 的工作方式。
经过长时间的搜索，我终于在Jquery Mobile's document 找到了这个：另一种页面特定脚本的方法是在没有 data-role=page 元素时在 body 元素末尾包含脚本定义，或在第一个 data-role=page 元素内。所以这是设计的。
那个 pageinit 是 stackoverflow.com/questions/8153236/jquery-mobile-changepage/… 救了我的原因
非常感谢。 jquery mobile 文档中明显缺少脚本需要在您要绑定的页面内的简单事实（至少不在明显的地方，例如此函数的示例所在的位置！）

【解决方案2】：

.live() 已弃用，建议在 jQuery 1.7+ 中使用.on()：

<script type="text/javascript">
    $(document).on('pageinit', '#indexPage',  function(){
        // code 
    });
</script>

查看在线文档以获取有关.on()的更多信息：http://api.jquery.com/on/

【讨论】：

【解决方案3】：

原来这是 1.0b3 中的 bug，它已在当前头部中修复。因此，如果您现在想要修复，您必须从git 获取最新信息。或者等待下一个版本。

【讨论】：

1.0 RC1 刚刚发布，它修复了这个问题。
它不适用于 git HEAD 的“最新”版本。你用过那些吗？我刚刚在 github 问题上添加了另一条评论。它仍然对我不起作用。这是我的实时测试（使用您的代码，但使用来自 git HEAD 的最新 css/js）：bit.ly/qlUL7R
RC1 中的相关错误，其中 pageinit 不会在 ajax 加载的页面上触发：github.com/jquery/jquery-mobile/issues/2636
我刚刚验证它仍然是 1.1 中的一个错误。
这个bug在1.3.2仍然存在，脚本只有放在一个div里面才会执行

【解决方案4】：

jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

这正在工作。现在所有页面转换和所有 JQM AJAX 功能都可以与您定义的 javascript 函数一起使用！享受吧！

【讨论】：

【解决方案5】：

pageinit 如果它是用普通

我有这样一个问题 - 在没有加载 'rel="external"' 的辅助页面上，公共

真的这段代码总是被执行...

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

如果你做了“标签式界面”，使用“pageshow”会更好

【讨论】：

【解决方案6】：

我不得不将脚本放在 HTML 页面部分，这对我来说是一个错误。它通常在浏览器中加载（不是通过 AJAX），并且全部在一个页面上，包括 javascript。我们不应该必须使用准备好的文档。

【讨论】：

【解决方案7】：

我发现处理这个问题的最简单方法是使用 JQM + Steal。只要你放，它就像一个魅力：

<script type='text/javascript' src='../steal/steal.js?mypage'></script>

data-role='page' div 的内部。

然后使用 AJAX 将任何可以使用相同的 mypage.js 并使用外部链接（通过使用 rel="external" 标记）连接到需要不同窃取页面的任何内容。

【讨论】：

【解决方案8】：

@Wojciech Bańcer

来自 jQuery 文档：

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

【讨论】：

【解决方案9】：

试试这个：

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});

【讨论】：

【解决方案10】：

$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});

【讨论】：

您能多评论一下您的答案吗？

【解决方案11】：

这些事件不会在初始页面上触发，只会在您通过 Ajax 加载的页面上触发。在上述情况下，您可以：

<script>
  $(document).ready(function() {
      alert("This happens");
  });
</script>

【讨论】：

那么为什么文档说“我们建议绑定到 [pageinit] 而不是 DOM ready() 因为无论页面是直接加载还是内容被拉到另一个页面Ajax 导航系统的一部分。”
我认为我们的目的不同。我以为您想知道如何更改目标网页。最新的文档说“但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。每当加载新页面时执行代码并且已创建，您可以绑定到 pagecreate 事件。”
pagecreate 对我也不起作用（在 1.0b3 中），当页面通过 Ajax 加载时，只能在没有 Ajax 的情况下工作。是不是和pageinit一样的bug？
只有在将
我也有同样的问题。 page init 仅在将其放置在正文中时才起作用。这在github.com/jquery/jquery-mobile/issues/2540 中报告为错误，但已关闭。但是对我来说它看起来像一个错误。