我构建了一个 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>
我还有一个包含函数 addBtnText()
的 app.js 文件App.js
function addBtnText() {
//buttons
$("#backBtn").html('back');
$("#mainBtn").html('main');
$("#helpBtn").html('help');
}
所以理论上，我希望它做的是在加载每个页面之前运行 addBtnText 函数，该函数会依次将文本标签添加到按钮。
它在第 1 页上按预期工作，在第 2 页上工作了 50%(加载后退按钮文本，但不加载帮助按钮文本)，并且在第 3 页上根本不加载(没有后退或主按钮文本) .
我完全不明白为什么它在第 1 页上运行良好，但在第 2 页上运行不正确或在第 3 页上运行不正确。
我是否遗漏了页面拆分和函数调用中的重要内容？
谢谢!
最佳答案
我发现了我的问题所在，Omar 的评论在金钱上是正确的。我有一个 ID 冲突，因为我在考虑传统网页(它们是独立的)与 jquery 将页面加载到 DOM 中。存在 ID 冲突，一旦我将 ID 更改为按钮上的类，一切都会按预期进行。
感谢 Omar 的提醒。
关于jquery - 使用 pagebeforeshow jquery 跨多个页面执行一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20848326/