html - iScroll 未在 jQuery Mobile 中的散列链接上加载

Question

我在 jQuery 移动网站的一个详细信息页面的嵌套 div 上设置了一个 iScroll。基本上，当我单击主页上的按钮(对于“关于”页面)时，它会转到带有散列链接的位置(使用我收集的 Ajax)。示例:

http://www.example.com/#about.php (这不适用于 iScroll，顺便说一句，这显然不是真正的 URL，只是一个语法示例)

基本上，当我自己加载 URL(作为非散列链接)时，iScroll 工作正常，但是当它通过从主页单击加载时，iScroll 不会加载并且无法工作。示例:

http://www.example.com/about.php

如何获取 <li> 的 anchor 链接到直接链接而不是散列链接还是学习如何让 iScroll javascript 加载到 Ajax 加载链接中更好？感谢您的帮助。

更新:

这是我用于链接到“关于”页面的 ListView 的语法。这是基本的 listview 语法，我在阅读它的所有地方都看到过。我现在正在处理的是第五个链接 (ABOUT)。我没有在 anchor 中使用散列，但它仍然将它链接到散列位置。有趣的是它不是 http://www.example.com/index.php#about.php只是http://www.example.com/#about.php .

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>

Answer 1

我猜你在 document.ready 中绑定(bind) iScroll 初始化处理程序。如果是这种情况，那么您需要将其更改为委托(delegate)事件处理程序(这是标准的 jQuery Mobile 实践):

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

来源:http://jquerymobile.com/demos/1.0/docs/api/events.html

长话短说:jQuery Mobile 使用 AJAX 将新页面拉入 DOM，这有很多副作用。

1. 所有 ID 在整个站点范围内都必须是唯一的，因为多个页面可以同时位于 DOM 中。
2. 链接到外部页面时 ( <a href="about.html">About</a> ) 只有 data-role="page"元素及其后代将被抓取(其他所有内容都将被忽略)。
3. 你不能依赖$(document).ready()因为通过 AJAX 抓取的页面不会触发此事件，它们会触发 page events如此处指定:http://jquerymobile.com/demos/1.0/docs/api/events.html

如果你想在链接到另一个页面时强制重新加载，有几个选项:

1. 输入rel="external" on the link tag: `
2. 输入data-ajax="false"在链接标签上:<a data-ajax="false" href="about.html"></a>
3. 全局禁用链接的 AJAX 处理:http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

但请注意，使用这些方法中的任何一种都会禁用转换。

更新

如果您收到散列链接，则意味着您关闭了 historyPushState功能或者您使用的是旧版本的 jQuery Mobile。如果您使用的是旧版本，我强烈建议升级到 1.0(1.0 RC3 和 1.0 Final 中有很多性能提升):http://jquerymobile.com/download/