谷歌的地方自动完成 - 点击链接使功能运行

我有一个输入字段，使用谷歌地方自动完成。在用户输入位置时出现的下拉菜单顶部，我添加了一个链接，指出“找不到地址？”谷歌的地方自动完成 - 点击链接使功能运行

我想要完成的任务：

当？“找不到地址”的用户点击，我想了几个输入字段出现，因为这样的

（我从eventbrite获得此图像和想法）

我希望这些字段在e通风口位置输入栏。

我的想法是，我只是向这些输入字段添加隐藏类（display：none），并且当用户单击“无法找到地址”时，我会删除该类。理论上，这应该起作用。

但是，我似乎无法弄清楚如何识别用户点击链接。我试图通过简单输出“Clicked！”来简化问题当用户点击“找不到地址”时。但即使这样也行不通。有任何想法吗？

这里是我的代码：

<div class="form-group"> 
    <label for="location">Event Location</label> 
    <input name="location" type="text" class="form-control" id="location" placeholder="Hogwarts School, 127 Long Island"> 
</div> 
<script> 
      var ac = new google.maps.places.Autocomplete(document.getElementById('location')); 
      ac.addListener('place_changed', function() { 
       var place = ac.getPlace();     
      }); 
      $('#location').on('click', function() { 
       var picklist = $('.pac-container'); 
       var link = picklist.find('a'); 
       if(link.length === 0) { 
        picklist.append("<div class='pac-item'><a class='toggle'><div class='pac-icon'></div> Can't find address?</a></div>"); 
        $('.toggle').on('click', function() { 
          console.log("clicked!"); 

        }); 
       } 
      }); 

</script>

来源

2016-12-18 Asool

想通了！非常感谢你的帮助。

所以基本上，当我尝试匿名'在手机上摆弄，它的工作。换句话说，'click touchstart'被识别。在我的笔记本电脑上，我用'mouseover'取代了'click touchstart'，然后悬停在“无法找到地址”上。它的工作 - 检测到悬停。这意味着事件'点击'没有注册。

所以我看了看mdn事件的参考资料。

click：指向设备按钮（ANY按钮）已被按下并释放到某个元素上。

问题是只要按下鼠标，pac容器就会被移除。换句话说，你不会得到点击和释放。

因此，我不使用'点击'，而是使用'mousedown'事件，它只需要一个mousepress。和它的工作

$(document).on('mousedown', '.toggle',function() { 
     console.log("clicked!"); 
     alert("HI"); 
     $('.pac-container').remove(); 
});

来源

2016-12-19 20:12:30 Asool

不错的发现..我认为这是完整的过程后“下”，“上”和“点击” – Viney

我的猜测是自动完成的任何HTML，你在这样的事件处理程序通过内部克隆被删除，但你可以用冒泡委托点击'.toggle'一些根节点像<body， <html>或document对象本身。如要避免内存泄漏，我建议外$('#location').on('click', {.....})

placingyour处理程序试试这个

$(document).on('click', '.toggle',function() { 
      console.log("clicked!"); 
    });

来源

2016-12-18 12:14:22 Viney

我试过了，可惜它没有工作:( – Asool

你在手机上尝试吗？如果是这样，那么你需要触摸事件WEL与覆盖工作。反正看看[这里]（https://jsfiddle.net/1qaeb5fn/）进行必要的更改 – Viney

想出来！非常感谢您的帮助。 – Asool

谷歌的地方自动完成 - 点击链接使功能运行

回答

相关问题