0

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

它真的不清楚如何在页面更改后执行 javascript 但我快到了，我能够使用

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

    loadGmaps();
    geolocate();

});

但问题是此代码在每个页面更改/页面初始化时执行，如果我不在具有#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();
});

地图在我访问的每个水疗页面上都可以正常加载，但是当我从新加载的水疗页面加载时，如果我单击徽标返回主页，它会加载主页然后触发“ geolocate”功能，但在地理位置方面没有任何反应：

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 类...

4

1 回答 1

3

如果你的代码每个伪页面只运行一次，那么使用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 中何时存在伪页面。

于 2012-12-03T20:43:58.353 回答