正如标题所示，我正在使用 JQuery Mobile (1.3.0) 构建一个移动网站，并尝试实施 Google Places Autocomplete (API v3) 以帮助用户输入位置数据。
自动完成功能在桌面设备上正常运行，但在移动设备上使用时却不行（我只在 iOS 6 上测试过）。
在移动设备上使用时，相关位置的下拉列表确实会出现，但当您按下一个而不在地图上加载选择时，它就会消失。
我环顾四周，看到了一些可以看到
的 z-index 的解决方案.pac 容器
罪魁祸首（见：http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html）。
我已经实施了这些修复，但无济于事，并且 我不相信 z-index 是问题，因为我可以看到所选项目确实更改为它的 :hover 状态/颜色在手机上按下。
如果有人有任何建议，我很乐意，如果需要更多详细信息，请告诉我。
【问题讨论】：
标签： jquery-mobile google-places-api
Saravanan 的回答有点矫枉过正。要解决与 FastClick 和 PAC 的冲突，请将 needsclick 类添加到 pac-item 及其所有子项。
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
【讨论】：
谢谢丹尼尔。但是我给出的解决方案对性能有一些影响。
我稍微修改了 FastClick 库来实现这一点。
首先我向 FastClick 构造函数添加了一个参数，其中defaultElCls 将是不应实现 fastclick 的元素。
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
然后修改needsClick方法：
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
然后将pac-item 传递给FastClick 构造函数
new FastClick(document.body, "pac-item");
希望 FastClick 库也能解决这个问题 :)
【讨论】：
我也遇到了这个错误，并确定 fastclick 是罪魁祸首。我本来打算接受 Devin Smith 的回答，但 epegzz 关于 MutationEvents 被弃用的警告让我去了MutationObservers，由于我还没有看到涉及他们的修复，我想我会分享我的解决方案。
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
它比我希望的要复杂，因为我们不能只在顶层添加observer.observe('pac_container')，因为它是异步添加的。幸运的是，该问题的解决方案也是 MutationObservers。
我们在创建pac_container 时添加另一个观察者。这样，它会检测到 pac-items 被添加，当它们被添加时，我们添加 needsclick 类。
这是我第一次使用 MutationObservers，因此将不胜感激反馈/改进。如您所见，我使用了两个 jquery，但它应该很容易将其拉出来。
【讨论】：
fastclick 有一个补丁，可以很好地与 google 地方自动完成功能配合使用。见This answer :)
【讨论】：
在拉了很多头发之后，我发现问题出在我添加到项目中的“FastClick”库上。
正如@Saravanan Shanmugam 在此评论中指出的那样https://stackoverflow.com/a/16932543/1177832
FastClick 似乎会干扰自动完成功能。另请参阅上面的链接，了解他添加的解决方法，以使两者发挥得很好。
【讨论】：