1

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

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

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

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

如何获得<li>链接到直接链接而不是散列链接的锚点，或者学习如何让 iScroll javascript 加载到 Ajax 加载链接中更好？谢谢您的帮助。

更新：

这是我用于链接到关于页面的列表视图的语法。这是我在阅读它的所有地方都看到使用的基本列表视图语法。我现在正在处理的只是第五个链接（关于）。我没有在锚中使用散列，但它仍然将它链接到散列位置。有趣的是它不是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>
4

1 回答 1

1

我猜您正在处理程序中绑定 iScroll 初始化document.ready。如果是这种情况，那么您需要将其更改为委托事件处理程序（这是标准的 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，这有许多副作用。

  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/

于 2012-01-12T20:01:54.120 回答