jQuery Mobile 没有运行辅助 javascript答案

【问题标题】：jQuery Mobile not running secondary javascriptjQuery Mobile 没有运行辅助 javascript
【发布时间】：2011-08-22 00:04:44
【问题描述】：

我正在构建现有网站的移动版本，并且正在寻找对我遇到的问题的解释（作为 jQuery Mobile 菜鸟）。

这个页面对第一张图片有jquery反射效果： http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/（它通过将效果应用于任何具有“反射”类的图像来实现）。

如果您直接进入页面，则 js 会加载并且反射在图像上可以正常工作。但是，如果您已从此处导航到页面，即父页面，则反射 js 不起作用： http://m.fijitourism.com/accommodation/coral-coast/

据我了解，这与 jquery mobile 的 ajax 加载有关。我发现如果我在父页面的链接上使用 'data-ajax="false"'，反射 js 加载正常。

我的问题是：

-是否有更好/更正确的方法来实现反射而不在父页面链接上使用 data-ajax="false" ？我知道这并不是 'data-ajax="false"' 的真正目的。官方文档说使用它“如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面”，我不是。

-解释为什么ajax加载会阻止反射js会很棒。

【问题讨论】：

标签： android ajax jquery mobile

【解决方案1】：

原来我在处理这个确切问题的官方文档中遗漏了一个页面： http://jquerymobile.com/test/docs/pages/page-scripting.html

在 Ajax 加载和创建新页面时执行代码导航系统，必须绑定pagecreate事件。

pagecreate 事件是在正在初始化的页面上触发的，对吧初始化发生后。我们建议绑定到此事件而不是 DOM ready() 因为无论是否页面是直接加载的，或者内容被拉到另一个页面页面作为 Ajax 导航系统的一部分。

$('#aboutPage').live('pagecreate',function(event){ alert('这个页面刚刚被 jQuery Mobile 增强了！'); });

【讨论】：

在 jQuery 1.9+ 中，'live' 已被 'on' 和 'bind' 取代。

【解决方案2】：

这里解释了这个问题：http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

首先，当你用浏览器刷新页面时，确保你的脚本可以正常工作后，你可以修复 jquerymobile 解决方案。

基本上，导航中的所有页面都应该使用脚本，并且页面特定的脚本应该写在 data-role="page" 元素中。由于 jquerymobile 网站上没有很好的示例，而且实际完成这项工作有点棘手，所以我在这里提供了一个示例，用于使代码在 jquerymobile ajax 导航和页面刷新上都工作。

// this code is inside the data-role="page" element, as well as the possible script src tag
$(window).on('pageinit', function() {
     // do normal $(document).ready() code here basically
     });
 });

【讨论】：

很好，很容易修复..谢谢。

【解决方案3】：

我通过更改加载页面的方式来解决此问题。我将 target="_self" 放入 href 元素中，这样它就不会使用 # 系统加载。

我会将以下链接放在我的 index.html 页面上，该页面将导航到我的 signup.html 页面。

<a href="signup.html" target="_self" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Signup</a>

注意：您将失去“花哨”的 jQuery Mobile 页面转换功能

【讨论】：