Question

标题显示我正在使用JQuery Mobile（1.3.0）构建移动网站，并且我正在尝试实施Google地方信息自动填充功能（API v3）以帮助用户输入位置数据。

自动完成功能在桌面设备上正常运行，但在移动设备上使用时却没有（我只在iOS 6上测试过）。

在移动设备上使用时，会显示相关位置的下拉列表，但只需按一下而不会在地图上加载选择内容就会消失。

我环顾四周，看到了一些可以看到

的z指数的解决方案

的.pac容器

作为罪魁祸首（见：http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html）。

我已经实现了这些修复，但无济于事，我不相信z-index是问题因为我可以看到所选项目确实改变了它：hover state / color when在移动设备上按下。

如果有人有任何建议，我会全力以赴，需要更多详情让我知道。

Answer 1

Saravanan的回答有点矫枉过正。要修复与FastClick和PAC的冲突，请将 needsclick 类添加到 pac-item 及其所有子项。

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

Answer 2

谢谢丹尼尔。但我给出的解决方案会对性能产生一些影响。

我已经修改了FastClick库以实现这一点。

首先，我向FastClick构造函数添加了一个参数，其中defaultElCls将是不应实现快速单击的元素。

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库也能解决这个问题：）

Answer 3

我也遇到过这个错误，并确定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，但它应该很容易实现。

Answer 4

有一个针对fastclick的补丁，可以让它与Google地方自动填充功能配合使用。见This answer：）

Answer 5

经过多次拔毛后，我发现问题是我添加到项目中的“FastClick”库。

@Saravanan Shanmugam在此评论中指出https://stackoverflow.com/a/16932543/1177832

FastClick似乎会干扰自动完成功能。另请参阅上面的链接，了解他已添加的解决方法，让两个人玩得很好。

Google地方自动填充功能与Jquery Mobile无法在移动/触摸设备上运行

5 个答案: