专注于 jQuery Mobile pageshow 事件不呈现

Posted

技术标签:

【中文标题】专注于 jQuery Mobile pageshow 事件不呈现【英文标题】:Focus on jQuery Mobile pageshow event not rendering 【发布时间】: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 这工作得很好,如果你有时间我很想看看我做错了什么。至少提供一些答案,这样我就可以说我的问题得到了回答。 【参考方案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/

【讨论】:

以上是关于专注于 jQuery Mobile pageshow 事件不呈现的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile 自定义选择菜单适用于 Mobile Safari,但不适用于 UIWebView

适用于桌面和移动设备的 jQuery Mobile

JQuery Mobile适用于浏览器,但不适用于手机

jQuery专注于数组模糊

Jquery mobile getJSON 适用于浏览器但不适用于移动设备

jQuery:如何专注于输入文本字段,使光标位于文本的末尾?