javascript - jQuery Mobile - 直接加载 URL 然后通过哈希加载相同的 URL 在 DOM 中产生新的数据 Angular 色 ="page"div

Question

这个问题可能有点难以理解，所以我会更详细地解释一下:

假设我在某个网站上有一个移动站点，该站点的根目录是 http://www.site.com/mobile/

如果我在 URL 中没有任何散列的情况下加载此页面，那么我会在 DOM 中得到一个带有 data-role="page"的 div。如果我然后单击指向另一个页面的链接，这可能会将我带到 URL http://www.site.com/mobile/#/mobile/contact.html ，我得到另一个 data-role="page"链接，该页面被插入到 div 中。这一切都很好而且正确。

但是，如果我随后点击此页面上的链接返回主页(但不是后退按钮)并获取 URL http://www.site.com/mobile/#/mobile/ ，然后 jQuery Mobile 不再重用首次加载页面时存在的相同 data-role="page"div，而是将一个新的 div 插入到 DOM 中。

这会导致绑定(bind)到针对主页中特定 ID 的“pagecreate”事件的任何 JavaScript 都不起作用，因为这些 ID 不明确。

检查生成的 HTML 时我注意到的一件事是直接加载的 data-role="page"div(不是通过哈希 Ajax 加载)有一个 data-url 属性等于该 div 的 id，但是当它通过哈希加载时，data-url 等于哈希值。我想知道这种不一致是否导致了问题？

Answer 1

jQuery Mobile 使用数据 url 进行内部链接。它通常会自己填充这些内容，并使用散列链接更改目标 data-role="page"容器。我建议任何生成的页面都由服务器预先填充数据 url(即为用户登陆的第一个页面做 jQuery 的工作——如果他们登陆主页，用主页信息填充数据 url 字段，等)。

例如:

<div data-role="page" id="home-page" data-url="<?php echo $_SERVER['REQUEST_URI'];?>">