同じテンプレートを使用するページが多数あります。ご存じのとおり、jquery mobile は、あるページから別のページに移動するときに、次のページの本文のみを取り込みます。
<!-- Page starts here -->
<div data-role="page" class="ui-page">
<div data-role="content" class="ui-content" role="main">
<!-- Content Start -->
@RenderBody()
<!-- Content End -->
</div><!-- contentMain -->
</div> <!-- page1 -->
<!-- Page ends here -->
このテンプレートの開始時に、参照されているスクリプト ファイルがあります。
<script src="@Url.Content("~/Scripts/Apps.js")" type="text/javascript"></script>
この中に、各ページのページショーを検出し、その中に関数を登録するための関数がいくつかあります。
$('#Page1').live('pageshow', function (event, ui) {
$('#clear').click(function () {
//Doesn't Work when transitioning between pages - If I refresh or hit this url directly this works
var word = document.getElementById("word").value;
//Doesn't Work when transitioning between pages - If I refresh or hit this url directly this works
var word2 = $('#word').val();
});
});
私の問題は、ページ遷移後に getElementById または val() を介して要素を取得しようとすると、常に未定義として返されることです。ページを更新するか、URL を直接ヒットすると問題なく動作しますが、アプリ内の別のページから開始して (すべて同じテンプレートを使用しているにもかかわらず)、別のページに移動しようとすると、すべての範囲が異なるように見え、よくわかりません。ページショーの後にページ上の要素を取得する方法は?
これはうまくいくようですが：
alert($("#word").val()); $("#word").val("foobar"); alert($("#word").val());
ボタンで以下のようなことを試してみると、ページ遷移のボタンは非表示になりませんが、ページを直接更新すると表示されますか?
$('#Page1').live('pageshow', function (event, ui) {
$('#stop').closest('.ui-btn').hide();
入力:
<input type="button" id="stop" value="Stop" data-theme="e" data-inline="true" class="ui-btn-hidden">