Google 地点自动完成 - 点击 link 生成函数 运行
Google Places AutoComplete - Clicking on link makes a function run
我有一个使用 google 位置自动完成的输入字段。在用户键入位置时出现的下拉菜单顶部，我添加了一个 link 表示 "Can't find address?"
我想完成的事情：
当用户点击 "can't find address?" 时，我希望出现一些输入字段，因此
(我从 eventbrite 得到了这个图像和想法)
我希望这些字段显示在活动地点输入字段的正下方。
我的想法是，我会在这些输入字段中添加一个隐藏的 class（显示：none），当用户单击 "can't find address" 时，我会删除class。理论上应该可行。
但是，我似乎无法弄清楚如何识别用户单击了 link。我试图通过在用户单击 "can't find address" 时简单地输出 "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>
我的猜测是，自动完成会在内部克隆您传入的任何内容 html，因此事件处理程序会被删除，但您可以使用冒泡来委托在某些根节点（例如 <body 上点击 '.toggle' , <html> 或 document 对象本身。为了避免内存泄漏，我建议将您的处理程序放在 $('#location').on('click', {.....})
之外
试试这个
$(document).on('click', '.toggle',function() {
console.log("clicked!");
});
想通了！非常感谢您的帮助。
所以基本上，当我在 phone 上尝试匿名' fiddle 时，它成功了。换句话说 'click touchstart' 被识别了。在我的笔记本电脑上，我将 'click touchstart' 替换为 'mouseover'，然后将鼠标悬停在 "can't find address" 上。它起作用了——检测到悬停。这意味着事件 'click' 没有注册。
所以我查看了 mdn 事件参考。
单击：已在元素上按下并释放定点设备按钮（任何按钮）。
问题是只要按下鼠标，pac 容器就会被删除。换句话说，您不会获得点击和释放。
所以我没有使用 'click'，而是使用了 'mousedown' 事件，它只需要按下鼠标。它奏效了
$(document).on('mousedown', '.toggle',function() {
console.log("clicked!");
alert("HI");
$('.pac-container').remove();
});
我有一个使用 google 位置自动完成的输入字段。在用户键入位置时出现的下拉菜单顶部，我添加了一个 link 表示 "Can't find address?"
我想完成的事情：
当用户点击 "can't find address?" 时，我希望出现一些输入字段，因此
(我从 eventbrite 得到了这个图像和想法)
我希望这些字段显示在活动地点输入字段的正下方。
我的想法是，我会在这些输入字段中添加一个隐藏的 class（显示：none），当用户单击 "can't find address" 时，我会删除class。理论上应该可行。
但是，我似乎无法弄清楚如何识别用户单击了 link。我试图通过在用户单击 "can't find address" 时简单地输出 "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>
我的猜测是，自动完成会在内部克隆您传入的任何内容 html，因此事件处理程序会被删除，但您可以使用冒泡来委托在某些根节点（例如 <body 上点击 '.toggle' , <html> 或 document 对象本身。为了避免内存泄漏，我建议将您的处理程序放在 $('#location').on('click', {.....})
试试这个
$(document).on('click', '.toggle',function() {
console.log("clicked!");
});
想通了！非常感谢您的帮助。
所以基本上，当我在 phone 上尝试匿名' fiddle 时，它成功了。换句话说 'click touchstart' 被识别了。在我的笔记本电脑上，我将 'click touchstart' 替换为 'mouseover'，然后将鼠标悬停在 "can't find address" 上。它起作用了——检测到悬停。这意味着事件 'click' 没有注册。
所以我查看了 mdn 事件参考。
单击：已在元素上按下并释放定点设备按钮（任何按钮）。
问题是只要按下鼠标，pac 容器就会被删除。换句话说，您不会获得点击和释放。
所以我没有使用 'click'，而是使用了 'mousedown' 事件，它只需要按下鼠标。它奏效了
$(document).on('mousedown', '.toggle',function() {
console.log("clicked!");
alert("HI");
$('.pac-container').remove();
});