jQuery未从移动滑块控件捕获更改事件
我有一个屏幕,在用户调整滑块时执行百分比变化计算 以最简单的形式,可在此处查看: 当我在页面上实现此代码时,仅当我插入警报框时,计算才会起作用 这告诉我我的设计出了问题,但我一直无法找出问题所在 失败的代码在一个文件中 将其保存为“html”并在浏览器中打开(即,FF或Chrome) 当您单击“最大快照”时,您将看到无法工作的滑块 关闭浏览器并取消注释以下行:jQuery未从移动滑块控件捕获更改事件,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我有一个屏幕,在用户调整滑块时执行百分比变化计算 以最简单的形式,可在此处查看: 当我在页面上实现此代码时,仅当我插入警报框时,计算才会起作用 这告诉我我的设计出了问题,但我一直无法找出问题所在 失败的代码在一个文件中 将其保存为“html”并在浏览器中打开(即,FF或Chrome) 当您单击“最大快照”时,您将看到无法工作的滑块 关闭浏览器并取消注释以下行: //window.alert('uncomment me and I will work'); 打开浏览器时,单击“最大快照”,再次刷
//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>
欢迎
.数字区块
{
文本对齐:右对齐;
右侧填充:2px;
}
.mobilegridheader
{
背景色:暗灰色;
颜色:黑色;
文本阴影:无;
字体大小:粗体;
}
.原值
{
/*可见性:隐藏;
位置:绝对位置*/
颜色:红色;
背景颜色:黄色;
}
$(文档).ready(函数()
{
欢迎光临;
});
函数欢迎\文档\准备就绪()
{
//alert('取消我的注释,我会工作');
$('#_singleRepMaxSlider')。更改(函数(){
var percentageValue=$('#_singleRepMaxSlider').val()/100;
$('.original value')。每个(函数(){
var newValue=Math.floor(percentageValue*$(this.html());
var checkDigit=新值%10;
var-newFactor=0;
//TODO:如果四舍五入到最接近的5,可能有点过火,但效果不错
开关(校验位)
{
案例0:
案例1:
案例2:
案例3:
新因子=0;
打破
案例4:
案例5:
案例6:
新因子=5;
打破
案例7:
案例8:
案例9:
新因子=10;
打破
}
新值=(数学下限(新值/10)*10)+新系数;
$(this.next().html(newValue);
});
}
);
}
页脚
最大快照
更改单个重复的最大百分比:
单次重复最大值
运动
解除日期
重量(#)
后蹲
9/19/2012
185
185
硬举
9/19/2012
205
205
干洗
9/21/2012
135
135
肩压
9/19/2012
115
115
更新 我创建了一个更好的例子来重现这个问题。这个问题的答案是: 在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>
欢迎
//糟糕的实现:这是我最初拥有的:
$(文档).ready(函数()
{
//alert('取消我的注释,我会工作');
$('#_mainpageSlider')。更改(函数(){
$('##u mainpageOutput').val($('##u mainpageSlider').val());
}
);
$('#_testpagesslider')。更改(函数(){
$('.#_testpageOutput').val($('.#_testpageSlider').val());
}
);
});
//正确实施:注释或删除abo
$('#MaxSnapshot').live('pageinit',function(event){
welcome_doc_ready();
});
$(document).ready(function() {
welcome_doc_ready();
});