页面转换发生后，jQuery Mobile 获取导致页面转换的单击项目的 ID

Question

我有一个带有两个“页面”的 jquery 移动应用程序。第一页是 Google 地图，第二页是建筑物列表视图，其中每个列表项都有一个与其关联的 ID。当用户单击建筑物时，地图将平移到该建筑物并显示标记。但是，jquery mobile 的怪癖之一是我必须调用 google.maps.event.trigger(map, 'resize') 和 map.panTo(somePosition) 在页面转换发生之后，否则地图会显得很奇怪。我正在利用 jQuery Mobile pageshow 事件来执行此操作。我的问题是，在 pageshow 事件处理程序参数中是否有任何内容或任何将某些内容附加到 pageshow 事件处理程序参数中的方法，可以让我识别首先单击导致页面转换的列表项，因此我可以使用它来确定将地图平移到哪里？

目前，我必须以一种圆形的方式来做这件事，我点击所选列表项的单击事件，将所选列表项 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 事件处理程序，我认为这将是解决此类问题的良好开端。

Answer 1

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

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

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

Answer 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，这将允许全局变量被完全消除。