Question

每个页面都有一个文件，我试图在每个页面上实现pageinit事件处理程序（我认为严格属于一个页面，应该在那里声明），如下所示：

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

事件被正确绑定到页面，因此代码被执行但是 - 现在我的问题 - 如果我去另一个页面并稍后返回pageinit事件将被执行两次。我认为那是因为.live方法再次将pageinit事件绑定到页面。但是，pageinit事件不应该只在页面初始化时调用一次吗？我在这里缺少什么？

Answer 1

我通过传递事件的名称解决了这个问题，在本例中是“pageinit”而不是处理程序。

<script defer="defer" type="text/javascript">

var supplier = null;
$("#pageID").die("pageinit"); //<--- this is the fix
$("#pageID").live("pageinit", function(event){

console.log("initialized - @(ViewBag.ID)");
supplier = new Tradie.Supplier();

supplier.Initialize("@(ViewBag.ID)");

}）;

参考：http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx

Answer 2

我认为最好将您的JavaScript代码移动到另一个文件中，因为当您浏览网站时，jQuery Mobile可能会清除（读取：从DOM删除）myPage页面，因此必须再次加载它并且hense重新运行您定义的相同代码块，并为pageinit事件绑定2个侦听器。

这基本上就是为什么他们建议使用live或on函数，但如果在页面上包含绑定代码则会失败;）

但是，如果您坚持在每页的基础上放置代码，而不是使用bind代替live。

参考：http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html

因此，jQuery Mobile有一个简单的机制来保持DOM的整洁。每当它通过Ajax加载页面时，jQuery Mobile会标记要在以后离开它时从DOM中删除的页面（技术上，在页面隐藏事件中）。

Answer 3

我很确定他们建议使用on（）将pageinit绑定到文档。 E.g。

$(document).on ('pageinit', '#myPage', function (event) {

而不是将pageinit绑定到页面，而该页面正在重新进入。事实上，我认为$（document）.on（）是推荐在jQuery中绑定事件的方法，一般来说，现在。

Answer 4

我使用的快速解决方法是声明包含处理函数的变量。

var handler = function() {
    // your code
};

然后在使用die()

绑定处理程序之前始终使用live()

$( "#myPage" ).die( handler ).live( handler );

我确信这不是作者的预期用法，但它可以解决问题，您可以将代码留在DIV页面中。

Answer 5

$("#page1").live("pageinit", function () {
    alert('pageinit');
    $("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});

如何正确使用pageinit？

5 个答案: