0

タイトルに固定ヘッダー、ボタン付きツールバーに固定フッターを使用して、複数ページのhtmlファイルに基づくJquery/mobileを使用したPhonegapアプリに取り組んでいます。フッターの進む/戻るボタンをクリックすることで、ユーザーはいくつかのステップを移動し、各ページのデータのチャンクを更新して、その特定のステップの異なる「チャンク」間を前後にスワイプできるようにするという考え方です。

未解決の問題のほとんどを解決したので、ボタンを処理するための JQuery を個別の関数に抽出することでコードを整理し、サブページが表示されるたびにその AIUI を呼び出します。問題は、これを行ってから、進む/戻るボタンが最初のページでしか機能していないように見えることです。私が間違っているかもしれないアイデアはありますか？

関連する html:

<body onload="onBodyLoad()">

<div data-role="page" id="page1" class="page">

<script type="text/javascript">
    $(document).ready(function () {
    InitRightBar();
    InitLeftBar();
    ReloadText();
    InitBackButton();
    InitForwardButton();
    });
    </script>

<div data-role="header" data-id="fixedheader" data-position="fixed" >   
    <h1>Fixed header</h1>
</div><!-- /header -->

<div data-role="content">
    <div id="contentview">
        <a href="#page2" data-transition="flip">Linky</a>
    </div>
    <div id="rightbar">
        <img src="images/Testbar.png">
    </div>
</div><!-- /content -->

<div data-role="footer" data-id="fixedfooter" data-position="fixed">
    <a id = "BackButton" href="#">Back</a>
    <a id="ForwardButton" href="#">Forward</a>
</div><!-- /footer -->
</div><!-- /page1 -->

<div data-role="page" id="page2" class="page">

<script type="text/javascript">
    $(document).ready(function () {
            InitRightBar();
            InitLeftBar();
            ReloadText();
            InitBackButton();
            InitForwardButton();
            });
    </script>        

    <div data-role="header" data-id="fixedheader" data-position="fixed" >   
        <h1>Fixed header</h1>
    </div><!-- /header -->

    <div data-role="content">
    <div id="leftbar">
        <img src="images/Testbar.png">
    </div>
    <div id="mainview">
        <blockquote id="blocktext">
            <p>Hello world</p>
            <p><a href="#page1" data-transition="flip">Linky</a></p>
        </blockquote>
    </div>
    </div><!-- /content -->

    <div data-role="footer" data-id="fixedfooter" data-position="fixed">
        <a id = "BackButton" href="#">Back</a>
        <a id = "ForwardButton" href="#">Forward</a>
    </div><!-- /footer -->
</div><!-- /page2 -->
</body>

役立つ場合は個々の機能を提供できますが、アラートを使用してわかる限り、問題はおそらくここのどこかにあると思われます.2番目のページのボタンがアクティブ/クリック可能になりません...

とにかく、事前に感謝します！ジャイルズ

* Chris のコメントに対応する更新:

提案していただきありがとうございます - ページ 2 のスクリプトを無効にしてみましたが、違いはありませんが、それが実際に冗長であるためなのか、それとも私が抱えている全体的な問題によるものなのかはわかりません（ボタンを初期化する必要があると思いました。そのページは、ユーザーがスワイプまたはリンクしたときにのみ DOM に読み込まれるからです。）

2ページ目の固定ヘッダー/フッターの要素が実際に最初のページから保持されているのか、それとも単に同じ場所に複製されているのかを明確にするものは何も見えないので、それらを別々にコーディングしなければならなかったという事実から推測しましたそれらが「新しい」要素であり、それに応じて初期化しようとしていたこと...これは間違っていますか?

ボタン機能のコードは次のとおりです。

function InitBackButton (){
    $("#BackButton").click(function(event){
                           alert("triggered!")
                event.stopImmediatePropagation()
                if (counter >0)
                    {counter -=1;
                    $("#blocktext").html(pagecontent[counter][0]);
                }
    });
}         

function InitForwardButton(){
$("#ForwardButton").click(function(event){
                          event.stopImmediatePropagation()      
                          if (counter < 3)
                          {counter +=1;
                          $("#blocktext").html(pagecontent[counter][0]);
                          }
                          });
}
4

1 に答える 1

1

とった！

トリックは、「on」を使用してイベント ハンドラーを 1 回バインドし、ボタン名を「on」関数の最初ではなく「selector」フィールドにバインドすることでした。そうすれば、バインディングはDOM内のボタン名の現在および将来の出現の両方に対して機能します...

これはおそらくほとんどの人には明らかですが、私のような初心者には明らかではないため、わかりやすくするためにコードを次に示します。

これは機能します：

$("body").on("click", "#ForwardButton", function(event){
                               StepForward();
                               });
$("body").on("click", "#BackButton", function(event){
                          StepBack();
                            });

これはしません (後で作成される ForwardButton と BackButton のインスタンスは見つかりません):

$("#ForwardButton").on("click", function(event){
                               StepForward();
                               });
$("#BackButton").on("click", function(event){
                          StepBack();
                            });

これを最初のページの最初に配置することで、冗長性に関する Chris の指摘が正しいことが証明されました。実際、「初期化」ルーチンを残りのスクリプトと一緒に html の先頭に戻すことができます...

于 2012-06-18T09:17:21.270 に答える