重要提示：使用pageInit（），而不是$（document）.ready（）

Question

我在jQuery移动网站的一个详细信息页面中的嵌套div上设置了iScroll。基本上发生的是当我点击主页面上的按钮时（对于'about'页面），它会转到带有散列链接的位置（使用我收集的Ajax）。例如：

http://www.example.com/#about.php（这不适用于iScroll，BTW这显然不是真正的URL，只是一个语法示例）

基本上当我自己加载URL（作为非散列链接）时，iScroll工作正常，但是当从主页面点击加载时，iScroll不会加载并且无法正常工作。例如：

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

如何获取<li>的锚点链接到直接链接而不是哈希链接或者是否更好地学习如何在加载Ajax的链接中加载iScroll javascript？谢谢你的帮助。

UPDATE：

这是我用于listview的语法，我已将其链接到about页面。这是我在其阅读过的所有地方都看到的基本列表视图语法。我正在处理的是现在的第五个链接（关于）。我没有在锚点中使用哈希值，但它仍然将它链接到哈希位置。有趣的是，它不是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处理程序中绑定iScroll初始化。如果是这种情况，那么您需要将其更改为委托事件处理程序（这是标准的jQuery Mobile实践）：

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

重要提示：使用pageInit（），而不是$（document）.ready（）

你在jQuery中学到的第一件事就是在里面调用代码   $（document）.ready（）函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

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

长篇故事简短：jQuery Mobile使用AJAX将新页面拉入DOM，这有很多副作用。

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

如果您想在链接到另一个页面时强制重新加载，可以选择以下几个选项：

放rel="external" on the link tag:`
将data-ajax="false"放在链接代码上：<a data-ajax="false" href="about.html"></a>
全局禁用链接的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/

在jQuery Mobile中，iScroll不加载在散列链接上

UPDATE：

1 个答案:

重要提示：使用pageInit（），而不是$（document）.ready（）