Question

我在jQuery Mobile 1.3中工作，但我无法找到适合此场景的事件。

我有一个<div> #show_protocol，其中包含动态内容。如果浏览器在此页面处于打开状态，然后刷新，则不会显示任何内容（因为未填充的表单提交）。

所以，我想绑定到一个事件，检查它是否是这个特定的页面角色<div>，并执行一些代码，如果是这样的话。我尝试绑定到pageshow，pagebeforeload，pageinit，似乎没有一个在页面加载时工作。通过使用应用程序触发事件时会触发代码，但在首页加载时不会触发该代码。

这是我尝试过的：

$("#show_protocol").on( "pageshow", function(){ // swap in pageinit, pagebeforeload, etc.
    if ( $(this).hasClass("preload") ) {
        [..]
    } else {
        [..]
    }
});

还尝试过：

$(document).on( "hashchange", function(){

正如@Sudhir指出的那样：

$(document).on( "pageshow", "#show_protocol", function(){

这些都不起作用。我不确定JQM在浏览器第一次加载时会触发什么事件？

我的HTML是基本的，不应该影响功能：

<div data-role="page" id="show_protocol">[..]</div>

Answer 1

尝试做：

$(document).on('pageinit', '#show_protocol',  function(){
   //your code here
});

instead of $(document).ready(function() { ... });

使用

$(document).bind('pageinit')

参考:: jQuery Mobile Events

Answer 2

感谢Sudhir提出的.bind()建议，我能够这样实现：

 $(document).bind('pageinit', function( e ){ 
    var $id = $( e.target ).attr( "id" );
    if ( $id == 'show_protocol' ){ // check which page is loading
        if ( !$("body").hasClass("preload") ) { // check if already loaded
            $.mobile.changePage( "#protocols" ) // redirect
        }
    }
    $("body").addClass("preload");
 });

在页面加载/哈希加载上触发了什么事件

2 个答案: