Question

我想在我的jquery移动应用程序的所有页面上使用相同的页眉和页脚，并使用不同的文件控制它，例如footer.html。这很容易使用PHP包括，但我不能，因为我打算使用这个应用程序与phonegap。

搜索我发现使用

  <div data-role="footer">
<div class="footerExt"></div>
  </div>

和javascript

$('.footerExt').load('footer.html')

然而这不起作用。我应该提一下，我是javascript初学者，我几乎不明白发生了什么。

非常感谢

Answer 1

尝试使用以下事件，它适用于我的代码：

$('[data-role=page]').live('pageshow', function (event, ui) {
            $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
            });
        });

此gist显示整个代码。

Answer 2

来自jquery 1.9及以上live is now deprecated请使用on函数。在控制台中它会给出TypeError：$（...）。live不是函数

示例改变你的代码

$('[data-role=page]').live('pageshow', function (event, ui) {
            $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
            });
        });

替换为

 $('[data-role=page]').on('pageshow', function (event, ui) {
                $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                    $("#" + event.target.id).find("[data-role=navbar]").navbar();
                });
            });

Answer 3

您需要将外部html代码加载到具有data-role =“footer”的div，所以你需要改变：

<div class="footerExt"></div>

以

<div data-role="footer" class="footerExt"></div>

例如你的页脚html可能有一个h3

<h3>This is your footer</h3>

Jquery移动相同页脚在不同的页面上

3 个答案: