专注于 jQuery Mobile pageshow 事件不呈现答案

【问题标题】：Focus on jQuery Mobile pageshow event not rendering专注于 jQuery Mobile pageshow 事件不呈现
【发布时间】：2016-05-05 00:35:04
【问题描述】：

我有一个多页 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/

【问题讨论】：

您的小提琴使输入字段集中在我的淡入淡出的末尾。我正在使用 Chrome。那或者我不理解你的问题。
正如我上面所说，我无法以速记的方式进行复制。小提琴试图在不添加我正在使用的所有资产的情况下进行复制。
很遗憾，如果没有该问题的有效示例，则很难诊断。
明白了，我更希望有人能识别这种行为，而不是在代码中发现错误。
@Omar 这工作得很好，如果你有时间我很想看看我做错了什么。至少提供一些答案，这样我就可以说我的问题得到了回答。

标签： javascript jquery events jquery-mobile

【解决方案1】：

pageshow 已被弃用，因为它是原生事件。尽管 pagecontainershow 是一个自定义的 jQM 事件，当页面出现时触发已满载，过渡/动画已完成。

始终使用 jQM 事件

我改变了这个

$(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/

【讨论】：