1

私は現在1つのサイトで作業しています：http： //dlt.tribehosting.com/solution

コマーシャルまたはレジデンシャルボタンをクリックすると正常に機能しますが、サービスページに移動すると、jQueryの「トグル」が機能しません。実際にはすべてのjQueryスクリプトが機能しなくなります（ホームページのスライダーでも同じです）。

ページが実際にリロードされた場合、ユーザーが別のリンクに移動してすべてが壊れてしまうまで、すべてが適切です。これは、私が使用している（document）.ready関数と関係があります（ヘッダーで確認できます）。

この競合を防ぐ方法、またはナビゲーションリンクを介してアクセスしたときにjQueryトグルをすべてのページで機能させる方法はありますか？

ありがとう

4

1 に答える 1

1

問題は、document.readyAJAXを介してDOMに取り込まれるページのコードを実行するために使用していることです。つまり、DOMに追加される各ページのイベントにバインドする場合は、またはのいずれかを使用する必要がありpageinitますpagecreate。

変化する：

$(function(){
    var sidebar = $('.hor-nav');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

に：

//run this code when a pseudo-page is added to the DOM
$(document).delegate('[data-role="page"]', 'pageinit', function(){

    //only get the .hor-nav elements in this pseudo-page
    var $sidebar = $(this).find('.hor-nav');

    //no need to delegate here since the elements for this page exist in the DOM now
    $sidebar.find('a').bind('click',function(){
        $sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

documentこれは、DOM（ ）に常に存在する要素に対してイベント委任を使用しますが、.hor-nav要素が外部ページの一部である場合、要素がDOMに常に存在するとは限りません。

イベントに依存する他のコードがあるようですがdocument.ready、jQueryMobileWebサイトには当てはまらないはずです。このドキュメントをご覧ください：http：//jquerymobile.com/demos/1.1.0/docs/api/events.html（大きな黄色の警告に注意してください）

于 2012-06-15T18:35:53.147 に答える