Question

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

任何人都可能面临同样的问题。请告诉我触发事件或任何其他替代方案的步骤

Answer 1

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

Rest代码会清楚，希望它有所帮助，

代码

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

    });
});

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

Answer 3

可能会发生这种情况，因为jquery dom模型还没有准备好第一次触发第一页的页面显示事件，所以尝试在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
  });

jquery移动pageshow事件未在第一页上触发

3 个答案: