我正在构建一个由多个 jquery 移动页面组成的项目，每个页面都有一个导航栏。
当我查看每个页面时，$(document).ready 函数启动良好，但是当我通过导航栏转到该页面时，它不会启动。同样在 chrome 调试器中，我只看到一个 html 页面(我当前正在查看的那个)在源文件夹中。
当我刷新页面时，该功能正常工作
尝试将“$(document).ready(function () {”替换为:
"$("div[data-role*='page']").live('pageshow', function(event, ui) {"正如某人所建议的
但这也行不通。
这是我加载的第一个页面:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "getdata.aspx/return_member_list",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var parsedData = JSON.parse(res.d);
var tableStr = "<table class='CSSTableGenerator'>";
$.each(parsedData, function () {
tableStr += "<tr><td>" + this.fName + "</td><td>" + this.lName + "</td></tr>";
});
tableStr += "</table>";
$('#tableDiv').html(tableStr);
},
error: function (res, msg, code) {
// log the error to the console
alert("The following error occured: " + msg + " " + code);
} //error
});
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header" data-theme="a">
<h1>חברי העמותה</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="index.htm">חברי העמותה</a></li>
<li><a href="build.htm">בניית צוות</a></li>
<li><a href="test.htm"> בדיקה</a></li>
</ul>
</div>
<div data-role="content">
<div id="tableDiv"></div>
</div>
<div data-role="footer">
<h1>footer area</h1>
</div>
</div>
</body>
</html>
下面是第二页和第三页的标题: build.htm:
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function save_crew()
{
p_num = new Object();
p_num.p1 = p1.value;
p_num.p2 = p2.value;
p_num.p3 = p3.value;
p_num.p4 = p4.value;
l_num = new Object();
l_num.l1 = l1.value;
l_num.l2 = l2.value;
l_num.l3 = l3.value;
s_num = new Object();
s_num.s1 = s1.value;
s_num.s2 = s2.value;
s_num.s3 = s3.value;
var photo = { 'p1': p_num.p1, 'p2': p_num.p2, 'p3': p_num.p3, 'p4': p_num.p4 };
var light = { 'l1': l_num.l1, 'l2': l_num.l2, 'l3': l_num.l3, 'l4': l_num.l4 };
var sound = { 's1': s_num.s1, 's2': s_num.s2, 's3': s_num.s3, 's4': s_num.s4 };
// Put the object into storage
localStorage.setItem('photo', JSON.stringify(photo));
localStorage.setItem('light', JSON.stringify(light));
localStorage.setItem('sound', JSON.stringify(sound));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('sound');
var ro = JSON.parse(retrievedObject);
alert(ro.s2);
window.location.href="test.htm";
}
</script>
</head>
测试.htm:
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
var sound_RO = localStorage.getItem('sound');
var photo_RO = localStorage.getItem('photo');
var light_RO = localStorage.getItem('light');
sound_RO = JSON.parse(sound_RO);
photo_RO = JSON.parse(photo_RO);
light_RO = JSON.parse(light_RO);
$.each(sound_RO, function (index, value) {
alert(value);
});
$.ajax({
type: "POST",
url: "getdata.aspx/return_prof",
data: "{prof:'צלם'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var parsedData = JSON.parse(res.d);
$('[data-role="content"]').append('<div id="collapsible-set" data-role="collapsible-set"></div>');
$("#collapsible-set").append('<div id="collapsible" data-role="collapsible"></div>');
$("#collapsible").append('<h3>צלמים </h3>');
for (i = 0; parsedData[i] != null; i++) {
$("#collapsible").append('<p>' + parsedData[i].fName + ' ' + parsedData[i].lName + '</p>');
}
$('[data-role="content"]').trigger('create');
},
error: function (res, msg, code) {
// log the error to the console
alert("The following error occured: " + msg + " " + code);
} //error
});
});
</script>
</head>
最佳答案
原因
当 jQuery Mobile 在初始页面(使用 ajax)之后加载页面时，它只会加载它的 BODY 内容，这意味着在 HEAD 中初始化的任何 js 或 css 文件(如果它没有在第一次加载的 HTML 中初始化)将被忽略.所以你所有的自定义 js 代码将永远不会被执行。
解决方案
将所有 js 代码移动到第一个 HTML 文件中
你应该创建一个新的 js 文件，随便命名。将所有 js 代码(来自每个页面)放入其中。然后在要加载的第一个 HTML 文件中对其进行初始化。
将你的js代码移动到页面BODY
只需打开每个页面并将其 javascript 代码从 HEAD 移动到 BODY。因此，javascript 代码将被加载到 DOM 中并在页面显示时执行。
最后的想法
所有这些在我的其他答案/文章中都有更详细的描述和示例:Why I have to put all the script to index.html in jquery mobile
您还应该考虑切换到 jQuery Mobile 页面事件而不是文档就绪。文档就绪通常可以正常工作，但有时它会在页面加载到 DOM 之前触发。这就是为什么必须改用 jQM 页面事件的原因。他们将确保仅在页面安全加载到 DOM 后才触发页面内容。要了解更多信息，请查看此答案/文章:jQuery Mobile: document ready vs page events
关于javascript - $(document).ready 函数不会启动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15850717/