javascript - 关注 jQuery Mobile pageshow 事件不渲染

Question

我有一个多页 HTML。第一页上有一个指向搜索页面的链接，我想在其中自动将搜索栏的文本框聚焦。

在我当前的代码中，某些动画似乎滞后于 pageshow 事件，从技术上讲，直到事件触发后才会出现。

我在外部和正文中定义了以下 javascript，并且我得到了相同的结果

$(document).on('pageshow', '[data-role="page"]', function (event) {
   $('#footerBagCount').text(myBag.totalQty);

   switch ($(this).attr('id')) {
       case "mpos":
           break;
       case "productlookup":
           $("input:text:visible:first").focus();
           $(document).enhanceWithin();
           break;
       default:
           console && console.log("default show!!");
   };
   console && console.log($(this).attr('id') + " - pageshow!!");
});

当运行时，文本框没有焦点。但是，如果我返回然后再次进入搜索页面，它就会出现。如果紧随其后调用警报窗口，它也会出现。

我尝试使用 jsfiddle 重现该问题，但没有成功，它只显示了所需的效果。 https://jsfiddle.net/PolishVendetta/az3kfh5y/

是否有任何已知问题会导致此类行为？

编辑我能够复制该问题并缩小原因范围。我在 page 外部定义了面板，用作外部面板。看起来像这样定义左侧面板是可行的，但是右侧面板会阻止突出显示。

https://jsfiddle.net/PolishVendetta/cfu8g331/

Answer 1

pageshow is deprecated because it's a native event. While pagecontainershow is a custom jQM event, which is emitted when page is fully loaded and transition/animation had finished.

Always use jQM events

我改变了这个

$(document).on('pageshow', '[data-role="page"]', function(event) {
    switch ($(this).attr('id')) {
        case "mpos":
            break;
        case "productlookup":
            $("input:text:visible:first").focus();
            break;
        default:
            console && console.log("default show!!");
    };
    console && console.log($(this).attr('id') + " - pageshow!!");
});

至此

$(document).on('pagecontainershow', function (event, data) {
    var page = data.toPage;
    switch (page.prop('id')) {
        case "mpos":
            break;
        case "productlookup":
            $("input", page).focus();
            break;
        default:
            console && console.log("default show!!");
    };
    console && console.log(page.prop('id') + " - page container show!!");
});

奥马尔的 jsfiddle - https://jsfiddle.net/cfu8g331/1/