页面转换发生后，jQuery Mobile 获取导致页面转换的点击项的 ID答案

【问题标题】：jQuery Mobile get id of clicked item that caused page transition, after page transition has taken place页面转换发生后，jQuery Mobile 获取导致页面转换的点击项的 ID
【发布时间】：2011-05-24 15:12:05
【问题描述】：

我有一个带有两个“页面”的 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 事件处理程序仍会执行，但如果用户之前没有选择过建筑物，则所选建筑物将不存在，或者会导致地图平移到 last 如果他们之前选择了建筑物，则选择建筑物，这实际上不是预期的行为。我确信我可以为两个事件处理程序提供一些额外的全局变量来围绕这个进行编码，但这会有点混乱。理想情况下，我正在寻找一种方法，只需绑定到 pageshow 事件，并从绑定的函数中推导出点击了哪个建筑物 ID。

总的来说，我对 jQuery 和 javascript 还比较陌生，所以请记住这一点。尽管我对 Chrome 中的 javascript 调试工具有所了解，但我仍然不确定如何有效地查找 ui 事件处理程序的 ui 参数中提供的信息，我认为这将是解决此类问题的良好开端。

【问题讨论】：

标签： jquery event-handling jquery-mobile

【解决方案1】：

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

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

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

【讨论】：

您能否详细说明新手如何/为什么需要销毁“其他”实时页面显示处理程序？
对不起，我有时会说些傻话。这叫不死不灭，我编辑过。
我已经接受了这个答案而不是我自己的答案，因为你已经完成了所有的工作。

【解决方案2】：

根据 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 侦听器，然后在我执行所需的代码后立即销毁（dieing）它，它消除了rejigMap 徘徊的问题并监听不相关的pageshow 事件，例如当用户按下“返回”按钮并且根本没有选择建筑物时会触发。我相信这可以通过遵循 Milimetric 的建议进行更多重构，使用 .live(eventType, eventData, handler) 实际穿过选定的建筑物到 rejigMap，这将允许完全消除全局变量。

【讨论】：