具有多个文件的 jQuery Mobile 站点

Posted 2023-03-15

【中文标题】具有多个文件的 jQuery Mobile 站点

【英文标题】：jQuery Mobile site with multiple files

【发布时间】：2012-03-27 22:43:07

【问题描述】：

我正在使用 jQuery Mobile 开发一个适合移动设备的网站，但我想使用多个 html 文件，每个文件都有一个 data-role="page" div（而不是多个 data-role="page" div在一个似乎是标准的文件中），因为这允许最大程度地重用现有站点。我知道可以在主页的 <a> 标签上使用的整个 data-ajax="false" 概念，但这会禁用我们非常喜欢的页面转换效果。

我已经尝试过 pageshow、pagebeforeshow、pageinit、document.ready 等，但除非我直接转到该页面，否则这些都不会触发，而不是从主页，即 TOC（或刷新跟随目录中的链接后的页面）。所以基本上，我的 JS 文件看起来像：

('div[data-role="page"]:first').live('pageshow',function() /*do custom stuff here */)

我还尝试将对此 JS 文件的引用添加到 TOC 页面，但没有运气......我有点预料到，但我想我会尝试。我很难相信 JQM 根本不支持以这种方式制作网站（不会丢失过渡效果），所以我可能遗漏了一些简单的东西。

【问题讨论】：

您使用的是什么版本的 Jquery 和 Jquery Mobile？

当我在提交后重新阅读我的问题时，它很快就击中了我，然后我试了一下并证实了我的怀疑......问题出在我的选择器上...... div [data-role ="page"]：如果我正在关注来自 TOC 的链接，则首先选择 TOC 页面的第一页 div。所以我开始在我的 div 上使用 ID ......无论如何我应该一直这样做......它开始工作了！

我很高兴你想通了。 Jasper 的回答很重要。直播存在一些已知问题。 id 的工作也做得更好。如果您使用 Jquery 1.7.x，请使用 .on() 方法而不是 live。

【参考方案1】：

.live() 已折旧，因此请使用 .delegate(): http://api.jquery.com/on 您应该绑定到 ID 而不是使用多个伪选择器（我认为这是您的问题，您的复杂选择器可能对事件委托无效）：

.

$(document).delegate('#my-page-id', 'pageinit', function () 
    //you can now do work for the `#my-page-id` pseudo-page
);

如果你想绑定到所有的伪页面来全局做一些事情，你可以使用：

$(document).delegate('[data-role="page"]', 'pageinit', function () 
    //you can now do work for all the `[data-role="page"]` "pages"
);

或者您可以将类放在不同的data-role="page" 元素上，以指定要绑定到哪个元素。

【讨论】：

当我在提交后重新阅读我的问题时，它很快就击中了我，然后我试了一下并证实了我的怀疑......问题出在我的选择器上......div[data-role="page"]:first 选择TOC 页面 的首页 div，如果我正在关注来自 TOC 的链接。所以我开始在我的 div 上使用 ID ...无论如何我应该一直这样做...它开始工作了！

猜猜这正是你所说的呵呵，所以我将此标记为答案（我兴奋地没有阅读这里的所有帖子）......虽然现在我有一个新问题，它仅适用于从 TOC 加载的第一页，每个单独的文件都有“下一个”和“上一个”导航按钮，当我使用这些导航按钮时，我遇到了类似的问题，知道为什么吗？但是，如果我从 TOC 转到一个页面，然后单击该页面的 TOC 并从那里转到下一页，那很好......