iScroll不加载在一个散列连接在jQuery Mobile的 [英] iScroll Not Loading On A Hashed Link In jQuery Mobile

问题描述

我已经成立了一个iScroll上的一个jQuery移动网站我的详细信息页面一个div嵌套。基本上当我点击按钮的主网页（一个关于页面），它进入的位置用散列连接（使用Ajax从我所收集的）会发生什么情况的。例如：

http://www.example.com/#about.php （这并未与iScroll科技工作，顺便说一句，这显然不是一个真正的URL，语法只是一个例子）

基本上当我本身加载的URL（作为非散列连接），则iScroll工作正常，但是当它从点击从主网页加载的iScroll不加载，而不是工作。例如：

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

如何获得锚定为＆LT;李＆GT; 链接到的直接联系，而不是散列连接或者是更好地学习如何获得iScroll JavaScript来在阿贾克斯装链路负载？感谢您的帮助。

更新：

下面是我用，我已经联系到有关页面的列表视图的语法。这是我上读了，我已经看到到处使用的基本列表视图语法。所有我负责的是第五个环节，现在（约）。我不使用散列的锚，但它仍链接到一个哈希的位置。有趣的是，它不是 http://www.example.com/index.php#about .PHP 的它只是 http://www.example.com/#about.php

 ＆LT; UL数据角色=列表视图＆GT;
        ＆LT;李＆GT;＆LT; A HREF =＃NAV1＆GT;测试与LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =＃NAV1＆GT;测试2版; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =＃NAV1＆GT;测试第3版; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =＃NAV1＆GT; TEST 4℃; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =about.php＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
 ＆LT; / UL＆GT;
 

解决方案

我猜你是绑定的document.ready 处理程序中的iScroll初始化。如果是这种情况，那么你需要改变，要委派的事件处理程序（这是标准的jQuery Mobile的做法）：

  $（文件）.delegate（'＃关于页面-ID，pageinit'，函数（）{
    VAR myScroll =新iScroll（ID-元素的'）;
}）;
 

  

重要：使用pageInit（），而不是$（文件）。就绪（）

     

你的jQuery学习的第一件事就是打电话给里面的code   $（文件）。就绪（）函数，所以一切都将尽快执行的   DOM被加载。然而，在jQuery Mobile的，阿贾克斯是用来加载   各页的内容为您导航DOM和DOM准备就绪   处理程序只执行用于第一页。要执行code每当   新的页面加载和创建的，您可以绑定到pageinit事件。   此事件进行了详细在本页面底部的说明。

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

长的故事作了简短：jQuery Mobile的使用AJAX来拉动新的页面到DOM，这有一些副作用影响

1. 所有ID必须是唯一的站点范围，因为多个页面，可以在DOM一次。
2. 当链接到外部网页（＆LT; A HREF =about.html＆gt;关于＆LT; / A＆GT; ）仅数据-role =页元素和它的后代就会抓起（其他的一切都会被忽略）。
3. 您可以不依赖于 $（文件）。就绪（）因为页面通过AJAX抓起不火这种情况下，他们解雇页面事件的规定在这里： http://jquerymobile.com/demos /1.0/docs/api/events.html

如果要强制重新加载链接到另外一个页面时，有几个选项：

1. 把相对=链接标签外部：`
2. 把数据AJAX =假链接标签：＆LT;数据阿贾克斯=假的href =有关。 HTML＆GT;＆LT; / A＆GT;
3. 全局配置链接AJAX处理： http://jquerymobile.com/demos /1.0/docs/api/globalconfig.html

但要注意，使用任何一种方法都禁止转换。

更新

如果你已经开始散列连接，这意味着，要么你关掉了 historyPushState 的功能，或者您使用的是旧版本的jQuery移动。如果您使用的是旧版本，我强烈reccommend升级到1.0（有很多性能增加1.0 RC3和1.0决赛）： http://jquerymobile.com/download/

I've set up an iScroll on a nested div in one of my detail pages in a jQuery mobile site. Basically what happens is when I click on the button on the main page (for an 'about' page) it goes to the location with a hashed link (using Ajax from what I've gathered). Example:

http://www.example.com/#about.php (this doesn't work with iScroll, BTW this is obviously not a real URL, just an example of syntax)

Basically when I load the URL by itself (as a non-hashed link), the iScroll works fine, but when it's loaded from clicking from the main page the iScroll doesn't load and isn't working. Example:

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

How do I get the anchor for the <li> to link to the direct link and not the hashed link OR is it better to learn how to get the iScroll javascript to load in the Ajax loaded link? Thanks for the help.

UPDATE:

Here's the syntax I've used for the listview that I have linked to the about page. It's the basic listview syntax that I've seen used everywhere I've read up on it. All I'm dealing with is the fifth link right now (ABOUT). I'm not using a hash in the anchor and yet it still links it to a hashed location. What's interesting is that it's not http://www.example.com/index.php#about.php it's just 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>

解决方案

I'm guessing that you are binding the iScroll initialization within a document.ready handler. If this is the case then you need to change that to a delegated event handler (this is standard jQuery Mobile practice):

$(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.

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

Long story made short: jQuery Mobile uses AJAX to pull new pages into the DOM, this has a number of side-affects.

1. All IDs must be unique site-wide since multiple pages can be in the DOM at once.
2. When linking to an external page (<a href="about.html">About</a>) only the data-role="page" element and its descendants will be grabbed (everything else will be ignored).
3. You cannot rely on $(document).ready() because pages grabbed through AJAX do not fire this event, they fire page events as specified here: http://jquerymobile.com/demos/1.0/docs/api/events.html

If you want to force a reload when linking to another page there are several options:

1. Put rel="external" on the link tag:`
2. Put data-ajax="false" on the link tag: <a data-ajax="false" href="about.html"></a>
3. Globally disable AJAX handling of links: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

But note that using any of these methods will disable transitions.

UPDATE

If you are getting hashed links that means that either you turned off the historyPushState functionality or you are using an old version of jQuery Mobile. If you are using an old version I highly reccommend upgrading to 1.0 (there are lots of performance increases in 1.0 RC3 and 1.0 Final): http://jquerymobile.com/download/

这篇关于iScroll不加载在一个散列连接在jQuery Mobile的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！