jquery - 在 Windows Phone 8 中使用 jquery mobile 进行页面导航时出现问题

Question

我正在使用 Phonegap 和 jQuery Mobile 开发 Windows Phone 8 应用程序。

我有一个用于页面导航的侧边栏菜单。由于我的多个页面有相同的菜单，我想保持它的动态，即在 .js 文件中生成。

问题是:如果我在 html 文件中添加 ul 和 li 元素，链接会正确导航到相应的页面。但是当我在 js 文件中附加 ul 和 li 元素时，链接没有响应。

这是正在使用的代码:

var ulStr = '<div class="ui-panel-inner">'+
                    '<header class="nav-header">MUSCLES</header>'+
                    '<ul id="leftMenu'+identifier+'" data-role="listview" class="sidelist ui-listview">'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C1" class="navlink ui-link-inherit" data-ajax="false">TERMINOLOGY</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch0C2" class="navlink ui-link-inherit" data-ajax="false">page 2 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                        '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#Ch1C0" class="navlink ui-link-inherit" data-ajax="false">page 3 name</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'+
                    '</ul>'+
                '</div>';

$('#leftNavmenu'+identifier).html("");
$('#leftNavmenu'+identifier).html(ulStr);

相同的代码在 Android 和 iOS 平台上都可以正常工作。所以不存在任何语法错误的可能性。如果有人能够提供帮助，那就太好了。

Answer 1

jQuery Mobile 的导航基于Ajax 和hashchange。当您禁用 Ajax ( data-ajax="false" ) 时，浏览器会查找带有从 anchor 标记引用的 id 的 div。

正如您的 OP 中提到的，它适用于 iOS 和 Android。正是因为hashchange事件被触发，因此发生转换。但是，如果禁用 hashListeningEnabled ，它无法在任何禁用 Ajax 的设备上运行。

使用data-ajax="false"当您想通过 HTTP 而不是 Ajax 加载外部页面时。与 rel="external" 具有相同的效果.