0

Jquery Mobileのpagechangeで特定のページのJavaScriptを実行する必要があります（あるページでユーザーを地理的に特定したり、別のページでGoogleマップを表示したりするなど）

ページ変更後にjavascriptを実行する方法は本当に明確ではありませんが、私はほとんどそこにいます、私は使用することができました

$(document).bind('pageinit', function(event){

    loadGmaps();
    geolocate();

});

ただし、問題は、このコードがページの変更/ページの初期化ごとに実行され、＃mapタグのあるページを使用していない場合は、コードを無料で実行することです。最悪？Jqueryはページをメモリにロードしたままにしますが、非表示にします。したがって、ページを変更すると、マップを16回続けて無料でリロードできます。

jquerymobileでロードされたページで特定のページのJavaScriptをどのようにバインドするのかについて私は本当に混乱しています。私はウェブのいたるところに潜んでいて、その特定のトリックを探しているのは私だけではないと確信しています...

ありがとう

編集

Jasperのソリューションを反映するようにコードを変更しましたが、ジオロケーションを除いて正常に機能します。

$(document).on('pageinit', '#wp-post-id-70', function(event){
    geolocate();
});
$(document).on('pageinit', '.wp-post-type-spa', function(event){
    loadGmaps();
});

マップは、スパであるアクセスした各ページで正常に読み込まれますが、新しい読み込みからスパページを読み込むときに、ロゴをクリックしてホームページに戻ると、ホームページが読み込まれ、「 geolocate」関数ですが、geolocationに関しては何も起こりません。

function geolocate()
{
    if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(
            function(position){
                $('#near_spa').load('?latitude='+position.coords.latitude.toString()+'& longitude='+position.coords.longitude.toString()+' #near_spa > *');
            }
        );
    }else{ 
        alert('Votre navigateur ne supporte pas la géolocalisation ou refuse l\'accès aux données de localisation');
    }
}

コードは実際にはnavigator.geolocation.getCurrentPositionに到達し、呼び出されますが、pffffは何もありません。F5を使用してホームページを手動でリロードすると、ジオロケーションリクエストが表示されます...

編集

「マップ」が各ページに正常に読み込まれることを気にしないでください。おそらく私と私の脳は疲れすぎています...

したがって、

$(document).on('pageinit', '.wp-post-type-spa', function(event){
    loadGmaps();
});

マップをまったくロードしません。はい、確認しました。ページにはw​​p-post-type-spaクラスがあります...

4

1 に答える 1

3

疑似ページごとに1回だけ実行されるコードがある場合はpageinit、疑似ページがDOMに追加されるたびに1回だけ実行されるイベントを使用します。

bind通話で特定の疑似ページをターゲットにすることもできます。

$(document).on('pageinit', '#some-map-page', function(event){

    loadGmaps();
    geolocate();

});

pageinitこれは、IDが。の要素でイベントが発生した場合にのみ実行されますsome-map-page。たとえば、マップコードを実行する各疑似ページ要素にクラスを追加できます。

<div data-role="page" id="some-map-page" class="map-page">...</div>

これは、次のイベントバインディングで機能します。

$(document).on('pageinit', '.map-page', function(event){

    loadGmaps();
    geolocate();

});

委任されたイベントハンドラーとして使用していることに注意してください.on()。これは、疑似ページがDOMに存在するかどうかわからないため、jQueryMobileを使用するときに非常に便利です。

于 2012-12-03T20:43:58.353 に答える