1

次の非常に単純なコードスニペットがあります。これは、別のファイルから、構築している複数ペ​​ージのサイトの1つのjQueryMobileページに読み込まれます。

$(document).ready(function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
            $(indexState).show();
      });
})

動作していましたが、ページをリロードしたときにのみ動作するようになりました。Firebugでページの読み込みを調べていましたが、このリンクが再読み込みされるまで表示されなかったため、jQueryファイルが一貫して読み込まれていませんでした。

<script src="inc/jquery/belmont.custom.js"></script>

通常、コンソールはjQuery mobileで新しいページが呼び出されたときに表示されますが、この特定のページへのリンクがクリックされたときに、この特定のページがコンソールログに常に表示されるとは限らないことがわかりました。デスクトップシミュレーター（DashcodeのiOSシミュレーター）、デスクトップブラウザー（FFおよびSafari）、およびiPhoneでテストしたところ、すべて同じ結果になりました。

誰かがこの行動を見たことがありますか？これが一貫して機能することをどのように確認できますか？

編集：私は次のようにバインドを使用するようにコードを変更しました：

$(document).bind('pageinit', function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
        $(indexState).show();
    });
})

console.log（indexState）を関数に追加しましたが、これも一貫して起動しません。

そして、私は実際に以前に誤って話しました-これは単一のページで構成されるモバイルサイトです。jQueryカスタム関数スクリプトをすべてのページにロードする必要がありますか？または、問題の1つにロードすることはできますか？

4

1 に答える 1

0

これが私がそれを整理した方法です。jQMは後続の各ページにAJAXをロードするため、動的にロードされる他の要素と同様に、このようにインタラクションを処理する必要があります。（私はjQuery 1.7以降を使用しています）に変更bind()すると、すべてが正常に機能します。on()

$('body').on('pageinit', '#id_of_page_using_function', function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
        $(indexState).show();
    });
})
于 2012-06-18T15:09:06.217 に答える