Question

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

我已经尝试过pageshow，pagebeforeshow，pageinit，document.ready等等，但除非我直接转到该页面，而不是从主页面链接到TOC（或刷新从TOC链接后的页面）。所以基本上，我的JS文件看起来像：

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

我也尝试将这个JS文件的引用添加到TOC页面但没有运气......我有点期待，但我想我会尝试。我发现很难相信JQM根本不支持以这种方式做网站（不会失去过渡效果），所以我可能会错过一些简单的东西。

Answer 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"元素上，以指定要绑定到哪个元素。

带有多个文件的jQuery Mobile站点

1 个答案: