事件处理 - jQuery Mobile 在页面转换发生后,获取导致页面转换的单击项目的 ID



我有一个带有两个"页面"的jquery移动应用程序。 第一页是谷歌地图,第二页是建筑物的列表视图,其中每个列表项都有一个与之关联的ID。 当用户单击建筑物时,地图将平移到该建筑物并显示标记。 但是,jquery mobile的一个怪癖是,我必须在页面过渡发生调用google.maps.event.trigger(map, 'resize')map.panTo(somePosition),否则地图会显示时髦。 我正在利用jQuery Mobile pageshow事件来做到这一点。 我的问题是,pageshow事件处理程序参数中是否有任何内容或任何将某些内容附加到pageshow事件处理程序参数的方法,这些方法将允许我识别单击的列表项的 id,该列表项首先导致页面过渡,以便我可以使用它来确定将地图平移到哪里?

目前,我

必须以一种大约的方式执行此操作,其中我点击所选列表项的单击事件,将选定的列表项 id 存储在全局变量中,然后稍后在 pageshow 事件处理程序中使用该全局变量。

所以像这样:

var selectedBuilding;
$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
});

$('div').live('pageshow',function(event, ui){
    if (ui.prevPage.attr('id') === "buildingSelect") {
        google.maps.event.trigger(map, 'resize');
        map.panTo(selectedBuilding);
    }
});

除了有点混乱之外,其中一个问题是如果用户根本没有选择建筑物编号,例如当他们按下建筑物列表页面上的"后退"按钮时。 在这种情况下,仍会执行 pageshow 事件处理程序,但如果用户之前未选择建筑物,则所选建筑物将不存在,或者如果用户之前选择了建筑物,则会导致地图平移到最后一个选定的建筑物,这实际上不是预期行为。 我相信我可以为两个事件处理程序提供一些额外的全局变量来解决此问题,但这会有点混乱。 理想情况下,我正在寻找的是一种只需绑定到pageshow事件并从绑定函数中能够派生单击的构建 ID 的方法。

总的来说,我对jQuery和javascript仍然比较陌生,所以请记住这一点。 虽然我已经在Chrome中使用了javascript调试工具,但我仍然不确定如何有效地找到ui参数中可用的信息pageshow事件处理程序,我想这将是解决此类问题的良好开端。

您可以将pageshow事件处理程序放在buildingSelect的单击处理程序中,并使用允许您通过事件绑定器传递数据的语法:从 http://api.jquery.com/live/.live( eventType, eventData, handler )

但是,在执行此操作之前,您必须die其他实时pageshow处理程序。 如果是我,我会清理你存储这些全局变量的方式,然后把它称为一天。 也许将它们放在一个位于命名空间之外的漂亮对象中,这样更安全。

编辑:将我不正确的口语"破坏"更改为正确的die。 因此,您可能希望像 $('div').die() 或文档中解释的任何其他变体一样死亡事件处理程序:http://api.jquery.com/die/

继Milimetric的回答之后,以下是我基本上所做的:

var selectedBuilding;
function rejigMap(event ui) {
    google.maps.event.trigger(map, 'resize');
    map.panTo(selectedBuilding);
    $('div').die('pageshow', rejigMap);
}
$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
    $('div').live('pageshow', rejigMap);
});

通过仅在选择建筑物时创建 live pageshow 侦听器,然后在我执行所需的代码后立即销毁(die ing(它,它消除了rejigMap徘徊和侦听不相关的pageshow事件的问题,例如当用户按下"后退"按钮并且根本没有选择建筑物时会触发。 我相信这可以通过遵循 Milimetric 的建议进行更多的重构,即使用 .live(eventType, eventData, handler) 实际通过选定的建筑物进行rejigMap,这将允许完全消除全局变量。

最新更新