当用户调整滑块时，我有一个执行百分比变化计算的屏幕。
最简单的形式可以在这里查看：http://jsfiddle.net/4Bgx7/2608/
当我在我的页面上实现此代码时，只有插入警告框才会进行计算。
这告诉我设计出了问题，但我无法确定问题。
失败的代码位于text file here。
将其本地保存为“html”并在浏览器（IE，FF或Chrome）中打开
当您点击“最大快照”时，您将看到不起作用的滑块。
关闭浏览器并取消注释以下行：
//window.alert('uncomment me and I will work');
当您打开浏览器时，单击“最大快照”，再次刷新屏幕，然后单击滑块。它会工作。
注释警告框行并保存文件。刷新页面：它会起作用。
关闭浏览器，重命名html文件，打开它：它不起作用。
如果上面的链接不起作用，这是html：
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style media="screen" type="text/css">
.number-block
{
text-align: right;
padding-right: 2px;
}
.mobile-grid-header
{
background-color: darkgray;
color: black;
text-shadow: none;
font-weight: bold;
}
.original-value
{
/*visibility: hidden;
position: absolute;*/
color:red;
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js"></script>
<script>
$(document).ready(function()
{
welcome_doc_ready();
});
function welcome_doc_ready()
{
//window.alert('uncomment me and I will work');
$('#_singleRepMaxSlider').change(function() {
var percentageValue = $('#_singleRepMaxSlider').val() / 100;
$('.original-value').each(function () {
var newValue = Math.floor(percentageValue * $(this).html());
var checkDigit = newValue % 10;
var newFactor = 0;
//TODO: Probably a bit overkill to round to nearest 5, but works
switch(checkDigit)
{
case 0:
case 1:
case 2:
case 3:
newFactor = 0;
break;
case 4:
case 5:
case 6:
newFactor = 5;
break;
case 7:
case 8:
case 9:
newFactor = 10;
break;
}
newValue = (Math.floor(newValue/10) * 10) + newFactor;
$(this).next().html(newValue);
});
}
);
}
</script>
</head>
<body>
<!-- Start Main -->
<div data-role="page" id="Main">
<div data-role="header">
</div>
<!-- /header -->
<div data-role="content">
<p>
<a href="#MaxSnapshot" data-role="button">Max Snapshot</a>
</p>
</div>
<!-- /content Main -->
<div data-role="footer">
<h4>Footer</h4>
</div>
<!-- /footer Main -->
</div>
<!-- /page Main-->
<!-- MaxSnapshot -->
<div data-role="page" id="MaxSnapshot">
<div data-role="header">
<h1>Max Snapshot</h1>
<a href="#Main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<!-- /header -->
<div data-role="fieldcontain">
<label for="_singleRepMaxSlider">Change Single-Rep Max Percentage:</label>
<input type="range" id="_singleRepMaxSlider" value="100" min="0" max="100" step="5"/>
</div>
<div data-role="fieldcontain">
<p>
<h3>Single Rep Max</h3>
<div class="ui-grid-b" data-theme="e">
<div class="ui-block-a mobile-grid-header">
<b>Exercise</b>
</div>
<div class="ui-block-b mobile-grid-header">
<b>Lift Date</b>
</div>
<div class="ui-block-c mobile-grid-header number-block">
<b>Weight(#)</b>
</div>
<div class="ui-block-a ">Back Squat</div>
<div class="ui-block-b ">9/19/2012</div>
<div class="ui-block-c number-block">
<div class="original-value">185</div>
<div class="calculated-value">185</div>
</div>
<div class="ui-block-a alternate-row">Deadlift</div>
<div class="ui-block-b alternate-row">9/19/2012</div>
<div class="ui-block-c alternate-row number-block">
<div class="original-value">205</div>
<div class="calculated-value">205</div>
</div>
<div class="ui-block-a ">Jerk Clean</div>
<div class="ui-block-b ">9/21/2012</div>
<div class="ui-block-c number-block">
<div class="original-value">135</div>
<div class="calculated-value">135</div>
</div>
<div class="ui-block-a alternate-row">Shoulder Press</div>
<div class="ui-block-b alternate-row">9/19/2012</div>
<div class="ui-block-c alternate-row number-block">
<div class="original-value">115</div>
<div class="calculated-value">115</div>
</div>
</div>
</p>
</div>
<a href="#Main" data-direction="reverse" data-role="button" data-inline="true">Return</a>
</div>
<!-- /page, MaxSnapshot -->
</body>
</html>
我创建了一个更好的例子来重现这个问题。 in the documentation找到了这个问题的答案：
你在jQuery中学到的第一件事就是在里面调用代码 $（document）.ready（）函数，所以一切都会尽快执行 DOM已加载。但是，在jQuery Mobile中，Ajax用于加载 导航时每个页面的内容都放入DOM中，并准备好DOM 处理程序仅对第一页执行。每当执行代码时 加载并创建新页面，您可以绑定到pageinit事件。 此事件在本页底部详细说明。
以下是解决方案注释掉的更简化示例：
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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>
<script>
//Bad Implementation: This is what I originally had:
$(document).ready(function()
{
//window.alert('uncomment me and I will work');
$('#_mainpageSlider').change(function() {
$('#_mainpageOutput').val($('#_mainpageSlider').val());
}
);
$('#_testpageSlider').change(function() {
$('#_testpageOutput').val($('#_testpageSlider').val());
}
);
});
//Correct Implementation: Comment or remove the above and uncomment the html below
/*($( '#TestPage' ).live( 'pageinit',function(event)
{
$('#_testpageSlider').change(function() {
$('#_testpageOutput').val($('#_testpageSlider').val());
}
);
});*/
</script>
</head>
<body>
<!-- Start Main -->
<div data-role="page" id="Main">
<div data-role="header">
</div>
<!-- /header -->
<div data-role="content">
<p>
<a href="#TestPage" data-role="button">Test Page</a>
</p>
<div data-role="fieldcontain">
<label for="_mainpageSlider">Change Slider:</label>
<input type="range" id="_mainpageSlider" value="100" min="0" max="100" step="5"/>
</div>
<p>
<div data-role="fieldcontain">
<label for="_mainpageSlider">Populate when Slider changes:</label>
<input id="_mainpageOutput" value=""/>
</div>
</p>
</div>
<!-- /content Main -->
<div data-role="footer">
<h4>Footer</h4>
</div>
<!-- /footer Main -->
</div>
<!-- /page Main-->
<!-- TestPage -->
<div data-role="page" id="TestPage">
<div data-role="header">
<h1>Test Page</h1>
<a href="#Main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<!-- /header -->
<div data-role="fieldcontain">
<label for="_testpageSlider">Change Slider:</label>
<input type="range" id="_testpageSlider" value="100" min="0" max="100" step="5"/>
</div>
<div data-role="fieldcontain">
<label for="_testpageOutput">Populate when Slider changes:</label>
<input id="_testpageOutput" value=""/>
</div>
<a href="#Main" data-direction="reverse" data-role="button" data-inline="true">Return</a>
</div>
<!-- /page, TestPage -->
</body>
</html>
答案 0 :(得分：1)
好吧，我想我已经明白了。 .ready（）函数正在搞砸你。您应该将所有脚本移到文档的末尾而不是头部，然后使用
调用welcome_doc_ready（）$('#MaxSnapshot').live('pageinit',function(event){
welcome_doc_ready();
});
而不是
$(document).ready(function() {
welcome_doc_ready();
});
在这里，您基本上是在执行welcome_doc_ready（）之前检查以确保Maxsnapshot div是好的。希望这会有所帮助。