不出现动态插入的页眉和页脚答案

【问题标题】：Dynamically inserted header and footer don't appear不出现动态插入的页眉和页脚
【发布时间】：2014-01-24 17:53:03
【问题描述】：

大家好，我有一个问题......

我使用 JQM 1.4 ...有时会发生当我单击按钮时被重定向（到新的 HTML5 文件）...在新页面上，页眉和页脚没有样式...它没有不会总是发生，但我不能有这样的页面......

对于页脚和页眉，我使用外部 HTML 文件（header.html 和 footer.html）并使用

$('#pageprostoriheader').load('header.html').trigger("create");
$('#pageprostorifooter').load('footer.html').trigger("create");

正如我所说，它不会经常发生，但当它发生时很丑......

我有一个多页模板，我认为这可能是因为页眉和页脚加载速度不够快.... ?

【问题讨论】：

标签： javascript jquery-mobile jquery-mobile-toolbars

【解决方案1】：

从 jQuery Mobile 1.4 开始，.trigger("create") 已弃用，并将在 1.5 中删除。此外，要创建页眉/页脚，您应该使用 .trigger("pagecreate")，但是，它也已被弃用并将被删除。

上述函数的替换是.enhanceWthin() 将在父元素上调用。这个问题有几个解决方案

在.load() 成功后增强工具栏，使用.toolbar()。

$('#pageprostoriheader').load('header.html', function () {
  $(this).toolbar();
});

$('#pageprostorifooter').load('footer.html', function () {
  $(this).toolbar();
});

在.load() 成功后增强工具栏，在活动页面上使用.enhanceWithin()。

$('#pageprostoriheader').load('header.html', function () {
  $.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});

$('#pageprostorifooter').load('footer.html', function () {
  $.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});

如果您在所有页面上使用相同的工具栏，我建议使用外部工具栏。

在<body>而不是page div中添加页眉和页脚的HTML标记，然后在jQuery Mobile.js之后的head中添加以下代码。
```
$(function () {
   $("[data-role=header], [data-role=footer]").toolbar();
});
```

【讨论】：

这个选项对我有用...谢谢...在活动页面上使用 .enhanceWithin() 成功 .load() 后增强工具栏。