2

私はまだJqueryMobileを初めて使用し、間違いなく優れたフレームワークです。

誰かが私を助けてくれることを願っています。ajaxページの読み込み後にjqueryイベントで問題が発生します。

次のコードは最初のページの読み込みでは機能しますが、他のページにアクセスした後は機能しません。

JS

   jQuery("#menu").tap(function () {
        jQuery("ul.sub-menu").slideToggle("slow");
    });

HTML

<input type="button" id="menu" value="Menu" data-icon="arrow-d"/>
<ul class="sub-menu" data-role="listview">     
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul>

pageinit（）とpageshow（）を使用してみましたが、それでも機能しません。

どんな助けでも大歓迎です。

worpdressのheader.phpのコード：

    <div data-role="page" id="indexPage" class="blog page">

    <script type="text/javascript"> 

        jQuery("div:jqmData(role='page'):last").bind('pageshow', function(){
              //your code here - $.mobile.activePage works now
            jQuery.mobile.activePage.on('tap', '.menu', function(){
                alert('test');
                jQuery.mobile.activePage.find('ul.sub-menu').slideToggle('slow');
            });
        });

    </script>


        <?php
        //Get data theme from theme options

        $options = get_option('touch_theme_options');
        $theme = $options['color_option'];

        ?>

        <div id="logo">
            <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/converse/images/sofrep-logo-mobile.png" alt="<?php bloginfo('title'); ?>"></a>
        </div>

        <div data-theme="<?php echo $theme ?>">
            <input type="button" id="menu" class="menu" value="Menu" data-icon="arrow-d"/>
            <ul class="sub-menu" data-role="listview">     
                <li><a href="#">Link 1</a></li>              
                <li><a href="#">Link 2</a></li>         
                <li><a href="#">Link 3</a></li>     
            </ul>
        </div>
4

4 に答える 4

2

ここで少し背景情報が必要です。jQuery は AJAX 経由でページをロードし、それを同じ HTML ページに挿入します。そこにJSがあり、引き込まれません。

もともとIDでDOM要素を参照してバインドしていましたが、これは実際には機能しません。jQMは複数のページを1つのhtmlページにロードするため、同じIDを持つ複数の要素を持つ可能性があります。必要なのは参照です$.mobile.activePage である現在のページへpageshow

ライブ イベントを使用したことをコメントで確認しました。これは正しい方向への一歩ですが、そのコードを複数回実行すると、複数のライブ イベントがバインドされるため、3 つのスライドが作成されます。

解決策は、イベント ハンドラーで jQuery を使用して、ライブイベント リスナーをドキュメントではなくルート div ページにバインドし、#menu をリッスンすることです。

jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
    $(this).on('tap', '#menu', function(){
         $(this).find('ul.sub-menu').slideToggle('slow');
    });
});

このコードは、jQM の pageinit イベント ハンドラ内で実行する必要があります。以下のリンクを参照してください。


ここにも同様の質問があります: https://stackoverflow.com/a/9200797/737023、jQMで競合することなくイベントをバインドする良い方法について、より徹底的な解決策があります: Jquerymobile - $.mobile.changepage

于 2012-02-09T17:59:08.933 に答える
0

正しい修正とコードは次のとおりです。

        jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
            jQuery(this).on('tap', '#menu', function(){
                 jQuery("div:jqmData(role='page'):last").find('ul.sub-menu').slideToggle('slow');
                console.log('clicked');
            });
        });

Clay Liuに感謝します！

于 2012-02-10T05:52:01.880 に答える
0

これが jQuery Mobile にも当てはまるかどうかはわかりません。
しかし、サイトが完全に読み込まれた後にメニューが作成または挿入されたようです。つまり、この時点で作成されていない限り、メニューにアクセスできないため、
追加することはできません! .tap()使ってみ.on()たり.live() (even its depricated)

于 2012-02-09T11:01:31.140 に答える
0

リフレッシュ機能を使用してみてください：

.refresh()

于 2013-04-30T05:12:38.880 に答える