jQuery Mobile-在后续的changePage调用中未调用pageinit处理程序

问题描述

我在html页面上有两个jquery移动页面"(指定为页面的div).我想每次访问页面时都调用方法.我连接了在'pageinit'事件上触发的方法.但是，它只会被调用一次，而不会在后续的changePage调用中被调用.

I have two jquery mobile "pages" (divs designated as pages) on the html page. I want to call methods every time I go to a page. I hook up methods to fire on 'pageinit' event. However, it only gets called once and doesn't get called on subsequent changePage calls.

这是 jsFiddle进行演示. (时间戳应该在pageinit上更改)

Here is a jsFiddle to demonstrate. ( time stamp should change on pageinit )

这是我的全部代码 https://gist.github.com/dev- e-loper/5356942

我的页面:

<div id="page1" data-role="page">
     <h1>One</h1>
 <a id="page1_link" data-role="button">go to page 2</a>

    <div id="page1_output"></div>
</div>
<div id="page2" data-role="page">
     <h1>Two</h1>
 <a id="page2_link" data-role="button">go to page 1</a>

    <div id="page2_output"></div>
</div>

用于连接pageinit处理程序的代码:

Code to hook up pageinit handlers:

$("#page1").live('pageinit', function () {
    $("#page1_output").append('<br/> page 1 initialized. time - ' + new Date());
});


$("#page2").live('pageinit', function () {
    $("#page2_output").append('<br/> page 2 initialized time - ' + new Date());
});


$("#page1_link").live('click', function () {

    $.mobile.changePage($("#page2"));

});

$("#page2_link").live('click', function () {

    $.mobile.changePage($("#page1"));

});

推荐答案

pageinit将在您的页面首次加载时触发.您的两个页面都缓存在DOM中，因此该事件将仅触发一次.尝试pageshow，它将在每次显示页面时触发.

pageinit will fire when your page first loads. Both of your pages are cached within the DOM so that event will only fire once. Try pageshow which will fire each time the page is shown.

此外，live()已贬值.您应该使用bind()或on().

Also, live() is depreciated. You should use bind() or on().

http://www.elijahmanor. com/2012/02/differences-between-jquery-bind-vs-live.html

$("#page1").bind('pageshow', function () {
    $("#page1_output").append('<br/> page 1 initialized. time - ' + new Date());
});


$("#page2").bind('pageshow', function () {
    $("#page2_output").append('<br/> page 2 initialized time - ' + new Date());
});

这篇关于jQuery Mobile-在后续的changePage调用中未调用pageinit处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！