0

有人可以告诉我如何在每个页面中启动 javscript 吗？如果您有任何问题，请告诉我。我听从了http://jquerymobile.com/demos/1.2.0/docs/api/events.html的建议

http://jsbin.com/ikemuh/3/

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta charset=utf-8 />
<script>


function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;


$("#clock").html(currentTimeString);

}
$(document).bind('pageinit', function() {
setInterval('updateClock()', 1000);
});
</script>

<title>Clock</title>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div data-role="page" id="page1">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page2">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page3">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page1">Finished!</a>
</p>
</div>
</div>
</body>
</html>
4

1 回答 1

2

您正在寻找与 jQuery 的普通 onDOMReady ( $(function() {})) 稍有不同的事件。看看文档的这一页。具体来说：

$(document).bind('pageinit', function() {
  //call to any JavaScript you want to run when your view is initialized
});

查看您的代码，我发现您实际上需要进行一些更改（这里是一个演示）。首先我切换到pageshow，其次，因为您实际上有 3 个跨度，其 id 为 ' Clock' 我切换到一个类 (ID应该在文档中是唯一的，并且因为 jQuery Mobile 使用单个文档来表示您需要请特别注意您的元素选择器。我更新了 JavaScript 以查找一个类（因此它更改了所有三个跨度），最后我替换了 setInterval：

setInterval('updateClock()', 1000);

对此：

setInterval(updateClock, 1000);

因为eval 是邪恶的

于 2013-02-07T00:12:00.487 回答