ユーザーがスライダーを調整すると、変化率の計算を実行する画面があります。
最も単純な形で、ここで見ることができます: http://jsfiddle.net/4Bgx7/2608/
このコードをページに実装すると、警告ボックスを挿入した場合にのみ計算が機能します。
これは、設計に何か問題があることを示していますが、問題を特定することはできませんでした。
失敗したコードは、こちらのテキスト ファイルにあります。
「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>
アップデート
この問題を再現するためのより良い例を作成しました。この問題に対する答えは、次のドキュメントにあります。
jQuery で最初に学ぶことは、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、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>