Question

我已经构建了一个webapp，我遇到了一些有趣的行为，我似乎无法让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函数，然后将文本标签添加到按钮。

它在第1页上按预期工作，在第2页上工作50％（加载后退按钮文本，但不是帮助按钮文本），并且在第3页上根本不加载（没有后退或主按钮文本）

我完全不知道为什么它在第1页上正常工作，但在2上完全没有正确或在3上完全正常。

在分割页面和调用函数时，我是否遗漏了一些重要内容？

谢谢！

Answer 1

我发现了我的问题，奥马尔的评论是对的。我正在考虑ID冲突，因为我正在考虑传统的网页（它们是独立的），而不是jquery将页面加载到DOM中。存在ID冲突，只要我将ID更改为按钮上的类，一切都按预期工作。

感谢Omar的领导。

使用pagebeforeshow jquery在多个页面上执行一个函数

1 个答案: