javascript - 页面更改后 jQuery Mobile 1.3 面板不工作

Question

我似乎在以编程方式打开和关闭 JQM 1.3 面板时遇到问题。

编辑:这是针对 JQM 1.3.x 而不是 1.4+

有点难以解释，所以我就弄了个 fiddle :)

fiddle 中发生了很多事情，但它只是一个更大的应用程序的示例并传达了问题。

如何复制:

1. 转到 fiddle
2. 在 Fiddle 上打开面板并转到第二页
3. 在第二页打开面板并转到第一页
4. 现在尝试打开第一页上的面板，它什么也没做。

受影响的浏览器:

编辑:这似乎已在 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 链接:

http://jsfiddle.net/q2YH3/

其他帖子的链接

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

Answer 1

有同样的问题，页面更改后面板不显示。

两个小改动可以解决这个问题:

我所做的是将面板从 id="myPanel"更改为 class="myPanel"，然后更改对面板的调用以打开:$('.myPanel:visible').panel('open'); - 就是这样!

问题是面板必须在 jQuery“页面”内，并且在转换之后，如果您在目标页面中设置了面板，您实际上有两个(或更多)具有相同 ID 的面板 < strong>哪个是错误的 或同一类哪个是好的。因此，您只需将 id 更改为一个类并调用可见类即可。

我花了太长时间，希望它能为其他人节省时间。