使用pagebeforeshow jquery跨多个页面执行功能答案

【问题标题】：Executing a function across multiple pages with pagebeforeshow jquery使用pagebeforeshow jquery跨多个页面执行功能
【发布时间】：2013-12-30 22:05:09
【问题描述】：

我已经构建了一个 web 应用程序，在该应用程序中遇到了一些有趣的行为，我似乎无法让 pagebeforeshow 命令始终如一地执行。对于此示例，假设我有 3 个 html5 页面（page1、page2 和 page3.html），每个页面的结构相似。

page1.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<title></title>

<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css">

<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/app.js"></script>

<style type="text/css">
    body {
        width:100%; 
    }

    #mainBtn, #helpBtn, #backBtn {
        width:50px;
        height:10px;
        padding:2px 10px 10px 10px;
        color:#FFF;
    }

    #contentBox {
        width:80%;
        height:500px;
        margin:15px auto;   
    }

    #page1 #contentBox {
        background-color:aqua;
    }

    #page2 #contentBox {
        background-color:yellow;
    }

    #page3 #contentBox {
        background-color:grey;
    }
</style>

</head> 
<body> 

<div data-role="page" id="page1">   
<div data-role="header" data-position="fixed" data-theme="b">
     <a id="mainBtn" href="page2.html" data-transition="slide" data-inline="true"></a>
     <h3>page 1</h3>
     <a id="helpBtn" href="page3.html" data-transition="slide" data-inline="true"></a> 
</div><!-- /header -->

<div data-role="content">
    <div id="contentBox">
        Some Content Here
    </div>
</div><!-- /content -->

<script type="text/javascript">
    $(document).on('pagebeforeshow', '#page1',  function() {
        addBtnText();
    });

</script>

 </div><!-- /page -->

 </body>
 </html>

Page2.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
</head> 
<body> 

<div data-role="page" id="page2">   
<div data-role="header" data-position="fixed" data-theme="b">
     <a id="backBtn" href="page1.html" data-transition="slide" data-direction="reverse"></a>
     <h3>page 2</h3>
     <a id="helpBtn" href="page3.html" data-transition="slide" data-inline="true"></a> 
</div><!-- /header -->

<div data-role="content">
    <div id="contentBox">
        Some Content Here
    </div>
</div><!-- /content -->

<script type="text/javascript">
    $(document).on('pagebeforeshow', '#page2',  function() {
        addBtnText();
    });

</script>

 </div><!-- /page -->

</body>
</html>

Page3.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
</head> 
<body> 

<div data-role="page" id="page3">   
<div data-role="header" data-position="fixed" data-id="etHdr" data-theme="b">
     <a id="backBtn" href="page1.html" data-transition="slide" data-direction="reverse"></a>
     <h3>page 3</h3>
     <a id="mainBtn" href="page2.html" data-transition="slide" data-direction="reverse"></a> 
</div><!-- /header -->

<div data-role="content">
    <div id="contentBox">
        Some Content Here
    </div>
</div><!-- /content -->

<script type="text/javascript">
    $(document).on('pagebeforeshow', '#page3',  function() {
        addBtnText();
    });

</script>

</div><!-- /page -->

</body>
</html>

我还有一个 app.js 文件，其中包含函数 addBtnText()

App.js

function addBtnText() {
//buttons
$("#backBtn").html('back');
$("#mainBtn").html('main');
$("#helpBtn").html('help');
}

所以理论上，我希望这样做是在每个页面加载之前，运行 addBtnText 函数，然后将文本标签添加到按钮。

它在 page1 和 page2 上按预期工作，工作 50%（加载后退按钮文本，但不加载帮助按钮文本），并且在第 3 页上根本不加载（没有返回或主按钮文本） .

我完全不明白为什么它在第 1 页上可以正常工作，但在第 2 页上却不能正常工作，或者在第 3 页上完全不正常。

我在页面拆分和函数调用中遗漏了一些重要的东西吗？

谢谢！

【问题讨论】：

按钮具有相同的 id，因此可能存在冲突。试试这个$("#backBtn", this).html('back'); 或$.mobile.activePage.find("#backBtn").html('back'); 来指定函数应该在哪个页面执行，因为所有页面都将被加载到DOM中。
就是这样。很好，奥马尔...我处于传统网页的心态，每个页面都是独立的，但是因为它们都通过 jquery 加载到 DOM 中，是的，与 ID 存在冲突...感谢您的输入。 :)

标签： jquery css html function jquery-mobile

【解决方案1】：

我发现了我的问题所在，而 Omar 对钱的评论是正确的。我遇到了 ID 冲突，因为我正在考虑传统的网页（它们是分开的），而不是 jquery 将页面加载到 DOM 中。有一个 ID 冲突，一旦我将 ID 更改为按钮上的类，一切都按预期工作。

感谢奥马尔的提醒。

【讨论】：