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

I want to have the same header and footer on all pages on my jquery mobile app and control it using a different file for example like footer.html. This is easy to do use PHP include but I can't because I am planning on using this app with phonegap.

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

Searching around I found using

在我找到的周围搜索

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

and javascript

和javascript

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

However this is not working. I should mention that I am javascript beginner, I barely understand what going on.

然而，这是行不通的。我应该提一下，我是javascript初学者，我几乎不知道发生了什么。

Thanks a lot

非常感谢

3 个解决方案

#1

Try with following event, it works with my code:

尝试以下事件，它与我的代码:

$('[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();
            });
        });

This gist shows the entire code.

这个要点显示了整个代码。

#2

from jquery 1.9 and above live is now deprecated please use the function with on. In console it will give TypeError: $(...).live is not a function

从jquery 1.9和以上的live现在已经被弃用，请使用带有on的函数。在控制台，它将给出TypeError: $(…)。生活不是一个函数。

example change your code

改变你的示例代码

$('[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();
            });
        });

Replace with

替换为

 $('[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();
                });
            });

#3

You need to load the external html code to an div with a data-role="footer", so you need to change the:

您需要用data-role="footer"将外部html代码加载到div中，因此需要更改以下内容:

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

来

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

and for example your footer html could have a h3

例如，你的页脚html可以有h3

  <h3>This is your footer</h3>

#1