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已被弃用，因为它是本机事件。而   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!!");
});

Omar的jsfiddle - https://jsfiddle.net/cfu8g331/1/

专注于jQuery Mobile的pageshow事件无法呈现

1 个答案: