动态更新 dom 内容后页面调整大小失败答案

【问题标题】：Page resize fails after updating dom content dynamically动态更新 dom 内容后页面调整大小失败
【发布时间】：2011-08-20 11:12:26
【问题描述】：

我正在使用 jqm 和 phonegap 开发一个移动应用程序。我创建了一个多页 html 文件。在单个 html 文件中有两个 ID 为“myPage1”和“myPage2”的 jqm 页面。“myPage1”包含项目列表。单击列表项时，我必须发出 ajax 调用并在“myPage2”上显示响应数据. 从 ajax 调用得到响应后，我正在调用 jqm changePage 函数，例如：

$.mobile.changePage('#myPage2', { 过渡：“幻灯片”，反向：错误，改变哈希：真 });

在 pagecreate 事件中，我正在对 DOM 进行一些更改，这会导致页面显示大小增加。在 PC 浏览器上一切正常，但在 android 上，页面大小与屏幕大小相同，即我无法向下滚动查看完整页面内容。

我尝试在更新 DOM 后调用 $('#myPage2').page() 和 $(document).resize() ，但都是徒劳的。

仅在使用基于 jqm ajax 的页面加载更改页面时才会出现此问题。如果我创建一个单独的 html 文件，在其中声明“myPage2”，而不是调用 $.mobile.changePage，而是使用 rel='external' 作为“myPage1”列表项中的链接属性，问题就解决了。我什至不必调用 $('#myPage2').page()。

但我想使用基于 jqm Ajax 的页面加载，因为我想利用 jqm 页面转换。

以下是我的配置详细信息： jQuery 版本 - 1.6.2 Jquery 移动版 - 1.0 Beta 2 安卓版本 - 2.2.2 Android 浏览器：Mozilla/5.0 (Linux; U; Android 2.2.2; hd-us; eeepc Build/FRG83G) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

任何指针都会非常有帮助，因为我的工作因此而受到限制。提前致谢。

阿杰

【问题讨论】：

请接受最适合this 问题的答案，如果您还有其他问题，请再询问。 Stack Overflow 不是一个论坛，它是个人问题收到同行评审答案的地方。

标签： jquery-mobile

【解决方案1】：

尝试使用新的触发选项，而不是 .resize(); 或 .page();：

.trigger('create');

以下是 Beta2 的发行说明：

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

【讨论】：

感谢您的快速回复。我按照您的建议尝试了 $('#myPage2').trigger('create') ，但没有帮助。我注释掉了所有更新 dom 的代码，并尝试通过 mobile.changepage 加载静态 html 页面。令我惊讶的是，即使我根本没有接触 DOM，问题仍然存在。该问题仅发生在基于 jqm ajax 的加载中。使用 rel='external' 禁用 Ajax 可以解决此问题。请提供更多建议。
还有一件事，我正在 Galaxy Tab 模拟器上测试它。很快就会得到一个真实的设备来检查问题是否是特定于模拟器的。
刚刚观察到一件奇怪的事情。如果我通过链接在我的 html 中包含 jqm css，我的问题就解决了，即 code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 但如果我从我的资源中包含 css，它就会回来，例如：请注意，我的资源中的jqm css和上面链接的内容是一样的。有什么建议？提前致谢
命名约定？尝试将文件命名为相同的名称，而不是 jquery.mobile.css
菲尔.. 伙计，你是摇滚明星。将文件重命名为相同的名称就可以了。