Question

我有一个使用Google地方自动填充功能的输入字段。在用户输入位置时显示的下拉菜单顶部，我添加了一个链接，说“＆＃34;无法找到地址？＆＃34;

我想要完成的任务：

当用户点击＆＃34;无法找到地址？＆＃34;时，我想要显示一些输入字段，

（我从eventbrite获得了这个图像和想法）

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

我的想法是，我只是在这些输入字段中添加一个隐藏的类（display：none），当用户点击＆＃34;无法找到地址＆＃34;时，我会删除班级。从理论上讲，这应该有效。

但是，我似乎无法弄清楚如何识别用户点击了该链接。我试图简单地输出＆＃34; Clicked！＆＃34;当用户点击＆＃34;无法找到地址＆＃34;。但即使这样也行不通。有什么想法吗？

这是我的代码：

<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>

Answer 1

想出来！非常感谢你的帮助。

所以基本上，当我尝试匿名时＃39;在手机上乱拨，它奏效了。换句话说，点击touchstart＆＃39;被认可了。在我的笔记本电脑上，我更换了“点击touchstart＆＃39;用鼠标悬停＆＃39;然后徘徊在＆＃34;无法找到地址＆＃34;。它工作 - 检测到悬停。这意味着该活动点击了＃39;没有注册。

所以我查看了mdn事件参考。

单击：在元素上按下并释放了指点设备按钮（任意按钮）。

问题是，只要按下鼠标，就会移除pac容器。换句话说，您没有获得点击和发布。

所以我没有使用＆＃39;点击＆＃39;，而是使用了＆＃39; mousedown＆＃39;事件，只需要一个鼠标按下。它工作了

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

Answer 2

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

试试这个

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

Google地方信息自动完成 - 点击链接即可运行功能

2 个答案: