我似乎在以编程方式打开和关闭 JQM 1.3 面板时遇到问题。
编辑:这是针对 JQM 1.3.x 而不是 1.4+
有点难以解释,所以我就弄了个 fiddle :)
fiddle 中发生了很多事情,但它只是一个更大的应用程序的示例并传达了问题。
如何复制:
- 转到 fiddle
- 在 Fiddle 上打开面板并转到第二页
- 在第二页打开面板并转到第一页
- 现在尝试打开第一页上的面板,它什么也没做。
受影响的浏览器:
编辑:这似乎已在 Chrome 30.0.1599.101 m 中修复
- Chrome 28.0.1500.95 m
- IE 10.0.9200.16635
- Safari//最新版本
- Android WebView (4.2.2)
不受影响的浏览器:
- 火狐 23
- 歌剧 12.16
fiddle 链接:
其他帖子的链接
https://github.com/jquery/jquery-mobile/issues/6308
http://forum.jquery.com/topic/panel-not-responding-after-page-change
编辑: 所以 Firefox 给我一个 Chrome 或 IE 都没有的错误。
当我点击返回第一页时,我得到:
类型错误:元素未定义
错误是JQ 1.9.1抛出的,我追溯至此:
A method for determining if a DOM node can handle the data expando
acceptData: function( elem ) {
// Do not set data on non-element because it will not be cleared (#8335).
if ( elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9 ) {
return false;
}
var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];
// nodes accept data unless otherwise specified; rejection can be conditional
return !noData || noData !== true && elem.getAttribute("classid") === noData;
}
`
注意:
不要在非元素上设置数据,因为它不会被清除 (#8335)。
Github 问题链接: https://github.com/jquery/jquery/pull/1232
OG代码:
$('.showMenu').on('click', function(){
$.mobile.loading('hide');
$.mobile.activePage.find('#'+$.mobile.activePage.attr('id')+'P').panel("toggle");
});
$('.btnMenuItem').on('click', function(event){
myPgActions.nav(event, function(target){
$.mobile.changePage(target);
}, false);
});
var myPgActions = {};
myPgActions = {
nav: function(event, callback, manualHash){
var PID = $.mobile.activePage.attr('id'),
target = (!!event) ? event.target.name : manualHash;
$("#"+PID+"P").panel( "close" );
if(PID != 'loading') $("#"+PID+"Iframe").hide();
if(PID == target){
$("#"+PID+"Iframe").hide('fast', function(){
$("#"+PID+"Iframe").attr('src', "");
myPgActions.update(PID, target, 'refresh', function(target){
callback(target)
});
});
}else{
this.update(PID, target, 'change', function(target){
callback(target);
});
}
},// end get
update: function(PID, target, type, updateCallback){
var ifReady = $.Deferred();
if(type == 'refresh'){
this.buildUrl(PID, function(url){
$('#'+PID+'Iframe').attr( 'src', url);
ifReady.resolve();
$.when(ifReady).then(function(){
updateCallback('#'+PID+'Iframe')
});
});
}else if(type == 'change'){
this.buildUrl(target, function(url){
$('#'+target+'Iframe').attr( 'src', url);
ifReady.resolve();
});
$.when(ifReady).then(function(){
updateCallback('#'+target);
});
}
}, // end set
buildUrl: function(page, buildCallback){
switch(page){
case 'dash':
var mobileSiteUrl = 'URL with options for iframe'
setTimeout(function(){buildCallback(mobileSiteUrl);},25);
break;
case 'local':
var mobileSiteUrl = 'URL with options for iframe'
setTimeout(function(){buildCallback(mobileSiteUrl);},25);
break;
}// End Switch
}
}// End Obj
最佳答案
有同样的问题,页面更改后面板不显示。
两个小改动可以解决这个问题:
我所做的是将面板从 id="myPanel"更改为 class="myPanel",然后更改对面板的调用以打开:$('.myPanel:visible').panel('open'); - 就是这样!
问题是面板必须在 jQuery“页面”内,并且在转换之后,如果您在目标页面中设置了面板,您实际上有两个(或更多)具有相同 ID 的面板 < strong>哪个是错误的 或同一类哪个是好的。因此,您只需将 id 更改为一个类并调用可见类即可。
我花了太长时间,希望它能为其他人节省时间。
关于javascript - 页面更改后 jQuery Mobile 1.3 面板不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18088605/