Question

在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问题跟踪器中标记为“已关闭”。显然，对于这是否正常工作，意见不一。

Answer 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

Answer 2

不推荐使用

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

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

查看在线文档，了解有关.on()：http://api.jquery.com/on/

的更多信息

Answer 3

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

Answer 4

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

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

Answer 5

如果它是在辅助页面（非MAIN页面）上的话，如果它是以普通的＆lt; script＆gt;写的话，它就不会被激活。标签...

我有这样的问题 - 在未加载'rel =“external”'的辅助页面上，常见＆lt; script＆gt;中的代码标签永远不会被执行......

这个代码总是被执行......

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

如果您制作“标签界面”，则使用“pageshow”更好

Answer 6

我不得不把脚本放在HTML页面部分，对我来说这是一个错误。它通常在浏览器中加载（不是通过AJAX），而是在包含javascript的单个页面上加载。我们不应该使用文件准备好。

Answer 7

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

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

data-role='page' div。

内

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

Answer 8

@WojciechBań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().

Answer 9

试试这个：

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

Answer 10

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

Answer 11

事件不会在初始页面上触发，仅在通过Ajax加载的页面上触发。在上面的例子中你可以：

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

如何在jquery mobile中初始化页面？ pageinit没有开火

11 个答案: