jQuery Mobile 1.1.0 RC 1 导航栏上的“错误加载页面”单击答案

【问题标题】：jQuery Mobile 1.1.0 RC 1 "Error loading page" on NavBar clickjQuery Mobile 1.1.0 RC 1 导航栏上的“错误加载页面”单击
【发布时间】：2012-03-27 12:59:52
【问题描述】：

由于我的 jQuery Mobile 应用在 iPhone 上运行速度很慢，所以我将它升级到 RC，希望能提高速度。

但是，当我单击导航栏时，我得到一个黄色的“加载页面错误”。

我是这样处理的：

$('div[data-role="navbar"] a').live('tap', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('div#' + $(this).attr('data-href')).show();
    $("#departureslist").listview("refresh");
    $("#arrivalslist").listview("refresh");
    return false;
});

观点：

<body>
    <div data-role="page" id="frontpage">
        <div data-role="header">
            <a data-icon="refresh" class="ui-btn-right" data-role="button" data-inline="true" data-iconpos="notext" id="refreshbutton"></a>
                <div id="headerlogo"><img src="images/ajax-loader.gif" id="loader" /></div>
                <div data-role="navbar">
                    <ul>
                        <li><a data-href="front" id="menu-front">Oversigt</a></li>
                        <li><a data-href="kort" id="menu-kort">Kort</a></li>
                        <li><a data-href="a" id="menu-a">Afgange</a></li>
                        <li><a data-href="b" id="menu-b">Ankomster</a></li>
                    </ul>
                </div>
            </div>
        <div data-role="content">
            <div id="front" class="content_div">        
            </div>

            <div id="a" class="content_div">
            <ul data-role="listview" id="departureslist" data-theme="c"></ul>               </div>

            <div id="b" class="content_div">
            <ul data-role="listview" id="arrivalslist"></ul> 
            </div>

            <div id="kort" class="content_div">
            <img src="images/retinamap.png" style="width: 100%;" /> </div>              
        </div>
    </div>

</body>

【问题讨论】：

标签： jquery-mobile navbar

【解决方案1】：

我建议使用data-id 属性而不是data-href，并且您还应该从tap 处理程序的锚标记中删除ui-btn-active 类，否则所有按钮最终看起来都像活跃：

$('div[data-role="navbar"] a').live('tap', function () {
    $('div[data-role="navbar"] a').removeClass('ui-btn-active');
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('#' + $(this).attr('data-id')).show();
    $("#departureslist").listview("refresh");
    $("#arrivalslist").listview("refresh");
    return false;
});

将navbar 更新为：

<div data-role="navbar">
  <ul>
   <li><a data-id="front" id="menu-front">Oversigt</a></li>
   <li><a data-id="kort" id="menu-kort">Kort</a></li>
   <li><a data-id="a" id="menu-a">Afgange</a></li>
   <li><a data-id="b" id="menu-b">Ankomster</a></li>
  </ul>
</div>

看到这个jsFiddle。

【讨论】：

嗨瑞恩。非常感谢您的回答，我的应用程序现在运行良好:)