jquery mobile pageshow事件未在第一页触发答案

【问题标题】：jquery mobile pageshow event is not firing on first pagejquery mobile pageshow事件未在第一页触发
【发布时间】：2012-06-28 08:01:34
【问题描述】：

我是 jquery 移动框架的新手。据我观察，我无法在文档的第一页上触发 pagebeforeshow 事件

有人遇到同样的问题吗？请建议我触发事件的步骤或任何其他替代方法

【问题讨论】：

我不确定发生了什么，因为我看不到任何代码，但我可以为您提供pagebeforeload 的工作演示，如果那很酷，我会在下面发布一个演示，:)跨度>
pagebeforeload 是否适用于文档的第一页？如果是，请发布演示
是的，如果这就是您要找的东西，请告诉我，给我 2 分钟，干杯！

标签： javascript jquery jquery-mobile

【解决方案1】：

演示 http://jsfiddle.net/yNzzG/

在演示中，当pagebeforeshow 处理程序被触发时，您会看到警报。

剩下的代码会说清楚，希望对你有帮助，

代码

$(document).bind('mobileinit', function() {
    alert('mobileinit');
});

$(function() {
    var selector = ':jqmData(role=page)';
    $('body').on('pageinit', selector, function(e, data) {
        // initialize page
        var $page = $(this);
        alert('init ' + $page.attr('id'));
    }).on('pagebeforeshow', selector, function(e, data) {
        // showpage
        var $page = $(this);
        alert('show Page before Show Stuff == > ' + $page.attr('id'));
    });
    $('#page1').on('pageinit', function(e, data) {
        // setup handler
        var $page = $(this);
        $page.find('.colorchanger').click(function() {
            var $content = $page.find('.ui-content'),
                isBodyC = $content.hasClass('ui-body-c');
            $content.toggleClass('ui-body-c', !isBodyC).toggleClass('ui-body-e', isBodyC);
        });

    });
});

【讨论】：

我将您的 jsfiddle 更新为 jquery 1.8.3 并停止工作：jsfiddle.net/yNzzG/25

【解决方案2】：

另一个对我来说效果很好并且不需要其他事件处理程序的替代方法，因此我所有的 pageshow 绑定都在一个地方是简单地创建一个虚拟的第一页，它将立即更改为第一个可见的：

<div id="start" data-role="page" data-title="App Title"></div>
<div id="realFirstPage" data-role="page">
   ...
</div>

然后在 document.ready 函数的最后，简单地这样做：

setTimeout(function() {
    $.mobile.changePage($("#realFirstPage"), {
        transition: 'pop',
        changeHash: false
    });
}, 100);

【讨论】：

【解决方案3】：

这可能是因为 jquery dom 模型第一次没有准备好为第一页触发 page show 事件，所以尝试在 pageinit 事件中包含（绑定 pageshow 事件），它适用于我...

$(document).on("pageinit", "#pageId", function(e){
    console.log( ' Inside the  pageinit event' );
    $(document).on("pageshow", "#pageId", function(e){
         // code for page show event
  });
         // code for pageinit event
  });

【讨论】：