如何在每个页面上启动 Javascript (jQuery Mobile)答案

【问题标题】：How to launch Javascript on each page ( jQuery Mobile )如何在每个页面上启动 Javascript (jQuery Mobile)
【发布时间】：2012-09-17 11:26:37
【问题描述】：

我是这个地方的新手，但已经在谷歌和这里搜索过答案，但我没有找到一个对我有帮助的答案（尽管这个问题被问了很多次！）。

所以我的问题是，我一直在制作一个 jquery 移动页面，我想稍后将其用作应用程序。我使用 3 个不同的页面（index.html、page2.html、page3.html），每次在导航中单击这些页面时，我都想触发一些 javascript。

我发现了很多关于这个问题的帖子，但大多数都有点旧（~2011 年）而且我发现的解决方案没有用。

这是我已经尝试过的：

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/js.js"></script>
<script src="js/moment.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

是我使用的每个页面的头部。在 jquery mobile 的文档中，您必须在要执行的 jquery 和 jquery mobile 之间插入脚本（js.js 是我的自定义 js）。这个脚本只适用于第一页，但我需要它在每一页上运行，因为当某些事件发生时我会在每一页上交换文本。

之后，我尝试将我的代码放在 div data-role="page" 中，以便每次都会执行，但这也没有用。当我只是在其中放入一些 console.log() 时（在 $(document).bind("pageinit", function(){ 之间），帖子不会在每次页面更改时触发，但是当我返回时会以²方式触发到原始页面（5次页面更改后，日志消息将在控制台中放置60次）。

function packungSpeichern() {

var formPackung = new Object;

formPackung.inhalt = document.getElementById("inhalt").value;
formPackung.date  = moment().format("DD-MM-YYYY");

localStorage.setItem( "formPackung", JSON.stringify(formPackung) );

}

这是我的自定义 js 文件中的一个示例。我只能在我启动的第一页上使用这个脚本，但不能在所有页面上使用：/

我希望你明白我想要什么，我的英语根本不是最好的:)

【问题讨论】：

您是如何尝试将 JavaScript 代码放入您的 DIV 中的？你能举个例子吗？
<script> $(document).bind("pageinit", function(){ console.log("test2"); }); </script> 当我把它放在第一页“test1”、第二页“test2”和第三页“test3”的每一页上时，我可以在控制台中看到页面上的事件发生了变化我来自的页面也会被触发，但是当我回到我来自日志的页面时不会被触发。我只是不明白为什么:)
回去是什么意思？您的意思是使用浏览器的后退按钮，还是通过单击链接重新加载页面？
@user1677406 您需要将<script src="js/js.js"></script> 可能还有<script src="js/moment.js"></script> 放入所有页面，以便在每个页面上执行
link 这是该页面的链接。它是德语，对不起。因此，当您启动第一页 (ubersicht) 时，您可以在控制台中看到“测试”。当您在导航中进入 packung 时，控制台会显示“test test2”。当你回到 ubersicht 时，它什么也没做。你回去 packung 它确实测试 test 2 test2。

标签： jquery jquery-mobile

【解决方案1】：

在 JQM 中首页的 HEAD：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

在每个 JQM 页面的 BODY（页面 DIV）中（底部的任何位置，如页脚等）：

<div data-role="page"> 
    <div data-role="content">
        <script src="js/js.js"></script>
        <script src="js/moment.js"></script>
     </div>
</div>

或者，如果你把它放到你的 HEAD 中，你会告诉 jQuery 执行这个脚本每次页面更改一次：

$(document).bind("pageshow", function( event, ui ){
    console.log('A page has changed!');
}

【讨论】：