如何正确使用pageinit？

Question

如何正确使用pageinit？

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 6

我通过传递事件的名称来解决问题,在这种情况下是"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)");

Run Code Online (Sandbox Code Playgroud)

});

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

Answer 2

nav*_*nav 2

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

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

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

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

因此，jQuery Mobile 有一个简单的机制来保持 DOM 整洁。每当通过 Ajax 加载页面时，jQuery Mobile 都会将该页面标记为在您稍后导航离开该页面时将其从 DOM 中删除（从技术上讲，是在 pagehide 事件上）。

归档时间：	14 年，1 月前
查看次数：	11912 次
最近记录：	13 年，2 月前