Question

我的任务是在Jquery Mobile的pagechange上执行特定的页面javascript（例如在一个页面上对用户进行地理定位或在另一个页面上显示Google地图）

它真的不清楚如何在页面更改后执行javascript但我几乎就在那里，我能够使用

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

    loadGmaps();
    geolocate();

});

但问题是这个代码在每个页面更改/页面init上执行，如果我不在具有#map标记的页面上，它只是执行代码。最差？ Jquery将页面加载到内存中但隐藏它们。因此，如果我更改页面，它可以连续16次重新加载地图。

我真的很困惑你应该如何绑定jquery移动加载页面中的特定页面javascript。我潜伏在网络上，我确信我不是唯一一个寻找特定技巧的人......

由于

修改

我更改了我的代码以反映Jasper的解决方案，除了地理位置之外它工作正常：

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

我访问的每个页面上的地图加载都很好，但是当我从新负载加载spa页面时，如果我点击徽标返回主页，它会加载主页然后激发“地理定位”功能但在地理位置方面没有任何反应：

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();
});

根本不再加载地图了，是的，我确认，这些页面的确有一个wp-post-type-spa类......

Answer 1

如果您的代码每个伪页只运行一次，那么使用pageinit事件，每次将一个伪页面添加到DOM时，该事件只运行一次。

您还可以在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()作为委托事件处理程序，这在使用jQuery Mobile时非常有用，因为您无法确定DOM中是否存在伪页面。

Jquery Mobile正在加载什么页面

1 个答案: