jQuery Mobile 1.4.3 修复工具栏和页面内容问题

Posted 2023-05-09

【中文标题】jQuery Mobile 1.4.3 修复工具栏和页面内容问题

【英文标题】：jQuery Mobile 1.4.3 fixed toolbar and page content issue

【发布时间】：2014-08-31 20:12:20

【问题描述】：

我正在使用 jQuery Mobile 开发一个网络应用程序。 我有一个包含更多 jQM 页面的 html 文件。 这些 jQM 页面具有通过 jQuery 动态加载的固定标题和内容（在这种情况下，我使用的是带有过滤选项的 Listview）。

这是所有 jQM 页面的 HTML 结构：

<div data-role="page" data-theme="a" id="pageTemplateList">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
    <a role="button" data-role="button" href="#" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-action ui-btn-icon-notext" data-theme="a">Pubblica</a>
    <h1 aria-level="1" role="heading" class="ui-title">Videothron</h1>
    <a role="button" data-role="button" href="#panelMenu" class="ui-btn-right ui-alt-icon ui-nodisc-icon ui-btn ui-icon-bars ui-btn-icon-notext" data-theme="a">Menù</a>
</div>
<div data-role="content" id="templateListViewContainer">
    <ul id="templateListView" data-role="listview" data-inset="true" data-hide-dividers="false" data-filter="true" data-filter-placeholder="Cerca template...">
    </ul>
</div>
</div>

我调用的用于在 jQM 页面之间移动的 jQuery 代码如下：

location.href = "#pageTemplateList";

当我从“第一”页面（下图中为“之前”）移动到“第二”页面，然后返回“第一”页面（下图中为“之后”）时，Listview内容位于固定工具栏下方，过滤器输入字段部分隐藏。

你有什么建议来解决这个问题？您需要更多信息吗？

谢谢， 亚历克斯。

【问题讨论】：

试试这个肮脏的把戏：$(document).on("pageshow", "body", function() $(document).scrollTop(0); );（抱歉，没有更多信息很难提出其他建议）

@Sga 感谢您的帮助，但没有成功。

【参考方案1】：

我执行了每一行 JS 代码，直到我发现这个问题是由调用这个引起的：

$('div[data-role="page"]').trigger("create");

删除这行代码（我在通过 jQuery 添加输入文本字段后调用）解决了这个问题。

不要在页面div上调用.trigger("create")，而是在页面div内部创建一个div（例如<div id="insideThePageDiv">）并为内部div调用.trigger("create")（例如$("#insideThePageDiv").trigger("create");）。