2

私は、JQuery Mobile 1.2 と php を使用して Web アプリに取り組んでいます。プロファイル ページから、ユーザーにログアウトの確認を求めるポップアップが表示されます。私がやりたいのは、クリックイベントでそのボタンをインターセプトして、ajaxリクエストを介してログアウトを処理することです。

すべてのプロジェクト ページに custom.js ファイルが含まれています。アプリがアカウント ページに読み込まれます。私はそれがロードされ、ajax ナビゲーション全体で動作していることを知っています。このコードを custom.js に含めると、次のようになります。

$("#perfil").live('pageshow',function(event){
    alert('This page was just enhanced by jQuery Mobile!'); 
});

プロフィール ページが表示されたときにアラートが表示されます。問題はクリック機能です。

これを含めると：

$("#perfil").live('pageshow',function(event){
    alert('This page was just enhanced by jQuery Mobile!'); 

    $('#logoutButton').click(function(){
        $('#output').html('Logging Out...');
        $.get("api/logout",function(data){
            if(data.success) {
                window.location = "index"
            }
            else{
                $('#output').html('Logout failed. Try again');
            }
            }, "json");
    });

});

振る舞いは奇妙です。メイン ページからプロファイル ページに移動すると、アラートが表示されます。しかし、ボタンが反応しません。ただし、更新すると (または最初にプロファイル ページからアプリをロードすると)、ボタンは正しく動作し、javascript ログアウト機能が実行されます。

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

<a id="logoutButton" data-role="button" data-icon="check" 
      data-inline="true" data-theme="e">Si, finalizar.</a>
4

2 に答える 2

2

プロファイル ページの custom.jsが実際には読み込まれていません (詳細は以下を参照)。その結果、クリック イベントをバインドしているときにボタンが DOM に存在しないため、イベント委任を使用してこれを回避できます。例

$(document).on('click', '#logoutButton', function(){
        $('#output').html('Logging Out...');
        $.get("api/logout",function(data){
            if(data.success) {
                window.location = "index"
            }
            else{
                $('#output').html('Logout failed. Try again');
            }
            }, "json");
    });

custom.js がロードされない理由は、jQuery Mobile でページをロードするときのデフォルトの動作が、ajax を介して div のみをロードし、data-role="page"それを現在のページの DOM にアタッチするためです。理解しておくべき重要な部分は、div ページのみが読み込まれ、そのページの他のリソースは読み込まれないということです。

data-role="page"別のページにカスタム スクリプトをロードする場合は、それを divラッパー内に含める必要があります。data-ajax="false"リンクの属性を使用して（またはrel="external"別のドメインの場合）、JQMにajaxなしでページを完全にロードするように指示することもできます。

補足として、jQuery 1.7 の代わりに.onを使用することを検討する必要があります。.live.live

于 2012-12-05T20:09:09.253 に答える
0

JQMでは、データの初期化方法とページの構造にすべて依存します。

メインページをロードするとき、すべてのスクリプトは一度初期化され、レスポンスやフィールのように「Ajax」用にキャッシュされます。

メインページとプロファイルページが複数ページ形式の場合、スクリプトは一度初期化されるため、クリックボタンは問題になりません。

または、単一のページにいる場合は、メインページからプロファイルページへのrel="external"が機能します。外部リンクにより、JQMは新しいHTTPリクエストを作成します。ただし、緩いページ遷移効果を実行します。

より良いアーキテクチャは、単一のJQMページを作成し、バインド機能としてログアウトボタンログアウトを利用することだと思います。

*クリック機能をバインドする方法：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

ソース

于 2012-12-05T19:35:45.600 に答える