专注于 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