1

jQuery Mobile でアプリケーションを作成しました。ページが表示されるたびに、一部の要素を非表示/表示するために、いくつかの JavaScript を実行する必要があります (セッション状態によって異なります)。

私はこれに多くの時間を費やしましたが、JavaScript が期待どおりに要素を非表示にしない理由を理解できません。少しランダムに思えます。実際、DOM は一貫しているように見えます。非表示にする必要がある要素と表示される要素には がありdisplay: noneますがdisplay: block、ブラウザで表示できるものと一致しません。

私は問題を非常に単純なケースにまで減らすことができました。これは基本的なボイラープレート テンプレートに JavaScript を追加したものです。

page1.html

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script src="test.js"></script>
    </head> 
<body> 

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

    <div data-role="header">
        <h1>Page Title</h1>
        <div id="el1">ELEMENT 1</div>
        <div id="el2">ELEMENT 2</div>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
        <a href="page2.html">PAGE 2</a>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

page2.html

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script src="test.js"></script>
    </head> 
<body> 

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

    <div data-role="header">
        <h1>Page Title</h1>
        <div id="el1">ELEMENT 1</div>
        <div id="el2">ELEMENT 2</div>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>
        <a href="page1.html">PAGE 1</a> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

test.js

$(document).bind("pagechange", function(event, data) {
    console.info('Changed to page: ' + data.toPage.attr('id'));
    $('#el1').hide();
    $('#el2').show();
});

これら 3 つのファイルをローカル サーバーに置くことで、簡単にテストできます。page1.htmlとpage2.htmlはほぼ同じページ (テスト用) で、test.jshide#el1と showだけ#el2です。この JavaScript は、ページが変更されると常に正常に実行されます (コンソール ステートメントは常に表示されます) #el1。

繰り返しになりますが、私が最も困惑しているのは、(Chrome コンソールで) DOM を直接見るとすべてが正しいように見えることです。CSS は明らかdisplay: noneに ですが、要素はまだ表示されています。

この問題の原因は何ですか？

4

1 に答える 1

0

あなたが試すかもしれないいくつかのこと。

  1. onの代わりに使用しbindます。おそらく、ドキュメントにバインドしていて、ドキュメントが変更され、バインドが失われている可能性があります。を使用onすると、これを取り除くことができるはずです。

  2. onページで直接使用:

    $('#page1').on('pagechange', function() {});

于 2012-11-04T13:59:57.567 に答える