7

我的每个页面都有一个文件，我正在尝试在每个页面上实现 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 事件不应该只在页面初始化时调用一次吗？我在这里缺少什么？

4

5 回答 5

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)");

});

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

于 2012-04-29T05:40:58.753 回答
2

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

这基本上就是他们建议使用liveoron函数的原因，但是如果您在页面上包含绑定代码，它就会失败；）

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

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

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

于 2012-01-08T23:59:41.527 回答
2

我很确定他们建议使用 on() 将 pageinit 绑定到文档。例如

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

而不是将 pageinit 绑定到正在重新初始化的页面。事实上，我认为 $(document).on() 是在 jQuery 中绑定事件的推荐方式，一般来说，现在。

于 2012-12-16T20:21:10.270 回答
0

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

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

然后总是die()在绑定处理程序之前使用live()

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

我确定这不是作者的预期用途，但它确实有效，您可以将代码留在页面 DIV 中。

于 2012-01-09T08:18:20.083 回答
0 
$("#page1").live("pageinit", function () {
    alert('pageinit');
    $("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});
于 2012-10-28T22:02:25.183 回答