jQuery Mobile - pageinit处理程序不会调用后续changePage调用

Question

我有两个jquery移动“页面”（divs指定为页面）在html页面上。每次进入页面时我都想调用方法。我挂钩方法在'pageinit'事件发射。但是，它只会被调用一次，并且不会在随后的changePage调用中调用。

这是jsFiddle to demonstrate。 （时间戳应该改变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处理程序：

$("#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")); 

}); 

Answer 1

pageinit会火当你的页面第一次加载。这两个页面都被缓存在DOM中，因此事件只会触发一次。尝试pageshow，每次显示页面时都会触发。

此外，live()已折旧。您应该使用bind()或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()); 
});