4

これが私の現在のセットアップです。

jquery モバイル フレームワークで 2 つのページを実行しています。

  • index.php
  • 記事.php

面倒なヘッダーには、評価と呼ばれる js ファイルがあります。

ここに私のjsがありratings.jsます:

$(document).ready(function(){
    $("#rating_1").click(function () {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
});

ロードしてから、どのトリガーにもindex.php移動しないと動作します。article.phpratings.js

追加した場合、rel="external"またはdata-ajax="false"トリガーが機能した場合。ただし、その後、ローダー ホイールを起動できなくなります。

助言がありますか？

ありがとう！

4

3 に答える 3

3

重要:$(document).bind('pageinit')ではなく を使用してください$(document).ready()

$(document).ready()jQuery で最初に学ぶことは、DOM が読み込まれるとすぐにすべてが実行されるように、関数内でコードを呼び出すことです 。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

試す：

$(document).bind('pageinit', function() {
    $("#rating_1").click(function() {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
});
于 2012-06-17T05:01:07.947 に答える
2

問題は、jQuery が Ajax 経由でページをロードするため、ページのみをロードすることです。

<div data-role="page"> </div>

ページの一部。

この種の問題を解決するには、3 つのことを行うことができます。

1.) すでに試したもの ( data-ajax=false を作成すること) により、ページが完全に再度読み込まれ、ローダー ホイールが表示されなくなります。

2.) イベントをライブ イベントにすることができます。

$("#rating_1").live('click', function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});

これにより、新しい #rating_1 が検索され、クリック イベントが追加されます。

3.) を使用する代わりに、関数$(document).readyを使用できます$( '#myPage' ).live( 'pageinit',function(event){};。

于 2012-06-17T04:08:53.340 に答える
2

すべてを内部に配置する必要があります。

<div id="page" data-role="page">
<!--here-->
</div>

ajax の読み込み中は、セクション内のスクリプトは<head></head>読み込まれません。

于 2012-06-17T03:28:35.277 に答える