动态页面固定页眉和页脚消失并在 android/iphone 上移动

Posted 2023-03-15

【中文标题】动态页面固定页眉和页脚消失并在 android/iphone 上移动

【英文标题】：Dynamic Page Fixed header and footer disappears and moves on android/iphone

【发布时间】：2013-05-30 15:59:58

【问题描述】：

根据标题。页眉和页脚固定在桌面上，但在移动浏览器（chrome、safari、phonegap webview）上，一旦滚动到页面中间，页眉和页脚就看不到了。

如果我双击屏幕某处，它们有时会重新出现。

我正在使用此代码动态创建页面：

$j.mobile.pageContainer.append('<div data-role="page" id="' + id + '" class="formswidget"><div data-role="header" data-tap-toggle="false" data-position="fixed" data-id="portalHeader"><a href="jsmenu.html" data-icon="home">Home</a><a data-icon="gear" href="settings.html">Settings</a><h1 id="formsheader">Forms</h1></div> <!-- header div --><div id="insertiondiv" data-role="content"></div><!-- content div --><div data-role="footer" id="formsfooter" data-tap-toggle="false" data-position="fixed" class="ui-body-a"><div data-role="navbar"><ul><li id="backbutton"><a href="#" data-rel="back">Back</a></li><li id="savebutton"><a href="#">Save</a></li><li id="submitbutton"><a href="#">Submit</a></li></ul></div><!--navbardiv--></div><!--footerdiv--></div><!--pagediv-->');

从这个过长的动态页面可以看出。我两个都有

data-tap-toggle="false"
data-position="fixed"

设置在页眉和页脚上。

我在使用静态外部页面的时候好像没有遇到这个问题。但是在动态生成和附加的页面上，问题就存在了。

我觉得我已经尝试了所有在 SO 和其他网站上看到的减量内容，但没有任何效果正常。

【参考方案1】：

查看编辑

解决了。

添加 html 后，我正在使用

实例化页面

$j("#dynamicpageid").page()

而不是

$j("#dynamicpageid").trigger("create")

将 .page 调用更改为 trigger("create") 会将正确的 css 规则应用于页眉和页脚并使其保持原位。

编辑：仍然不完全正确。如果没有使用 .page() 实例化某些页面，它们会崩溃，但错误非常神秘，并且源自 jquery 移动脚本本身。

Uncaught TypeError: Cannot read property 'jQuery1830677661889931187' of undefined 

跟踪调用链会将其返回到我的代码中对 .trigger("create") 的调用，但没有我用于页面的原始调用。奇怪的。试图进一步解决这个问题。