Google Places AutoComplete - 单击链接使功能运行答案

【问题标题】：Google Places AutoComplete - Clicking on link makes a function runGoogle Places AutoComplete - 单击链接使功能运行
【发布时间】：2017-05-03 11:46:24
【问题描述】：

我有一个使用谷歌地方自动完成的输入字段。在用户输入位置时出现的下拉菜单顶部，我添加了一个链接，上面写着“找不到地址？”

我想要完成的事情：

当用户点击“找不到地址？”时，我希望出现几个输入字段，例如

（我从 eventbrite 那里得到了这张图片和想法）

我希望这些字段显示在事件位置输入字段的正下方。

我的想法是，我只需在这些输入字段中添加一个隐藏类（显示：无），当用户单击“找不到地址”时，我会删除该类。从理论上讲，这应该可行。

但是，我似乎不知道如何识别用户点击了该链接。我试图通过简单地输出“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>

【问题讨论】：

标签： javascript jquery autocomplete google-places-api google-places

【解决方案1】：

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

所以基本上，当我在电话上尝试匿名小提琴时，它奏效了。换句话说，“点击 touchstart”已被识别。在我的笔记本电脑上，我将“click touchstart”替换为“mouseover”，然后将鼠标悬停在“找不到地址”上。它起作用了-检测到悬停。这意味着事件“点击”没有注册。

于是我查看了 mdn 事件参考。

click：一个指针设备按钮（ANY 按钮）已在元素上被按下并释放。

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

所以我没有使用“click”，而是使用了“mousedown”事件，它只需要按下鼠标即可。它奏效了

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

【讨论】：

不错的发现 .. 我认为它在“向下”、“向上”和“单击”的完整过程后被删除

【解决方案2】：

我的猜测是，自动完成功能会在内部克隆您传入的任何 html，因此事件处理程序会被删除，但您可以使用冒泡来委托单击某个根节点上的 '.toggle'，例如 <body 、 <html> 或 document 对象本身.为了避免内存泄漏，我建议将你的处理程序放在$('#location').on('click', {.....})之外

试试这个

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

【讨论】：

你是在手机上试试这个吗？如果是这样，那么您还需要触摸事件来处理叠加层。无论如何看看here 进行必要的更改
想通了！非常感谢您的帮助。