将事件添加到Google Maps API InfoWindow中的元素 [英] Adding event to element inside Google Maps API InfoWindow

问题描述

我想在Google Maps API（v3）InfoWindow中添加一个带有输入字段的表单并提交按钮。当提交时，我想调用一个函数

这里是我的代码（我目前只测试方向事件是否正在被解雇，我写了完整的 getDirections（）事件，并且可以确认它是否正常工作，并在正确触发时返回路线）： 使用MooTools的事件监听器，如下所示：

  var infoWindowContent =< b>获取路线From ...< b>< br /> 
 +< form id ='map-form'> 
 +地址/邮政编码：< input id ='map-from-address'type ='text'/> 
 +< input type ='submit'id ='map-go'value ='Go'/> 
 +< / form>; 
 
 var infoWindow = new google.maps.InfoWindow（{
 content：infoWindowContent 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.open（map，marker）; 
 dbug.log（$（ map-form））; 
 $（map-form）.addEvent（submit，getDirections）; 
}）; 
 
函数getDirections（event）
 {
 dbug.log（getDirections）; 
 event.stop（）; 
 
 
 
 $ b $ p 
 $ b当我在我的网站的其他地方使用MooTools时，我把所有的代码在 window.addEvent（'load'，function（）{...}）;  
 
 
 
 trace  dbug.log（$（map-form））; 这是正确输出表单元素，但事件不会触发。 
 
 
 
我已经将相同的事件添加到DOM中的另一个表单（具有不同的ID），并且工作正常。
 
 
所以，如果MooTools可以找到元素并且应该添加事件侦听器，那么什么能够阻止事件发生？这是一个范围问题？
解决方案
它看起来不像范围问题。 getDirections在相同的范围内。  
 
 
这是一个鸡蛋与鸡肉的情况。最终 - 您的html字符串不在DOM中，因此您无法将事件添加到它或从其中引用元素。信息窗口略有异步，因此您需要确保内容div已连接。或者，您需要使用事件委托。
 
 
 
 google提供的事件模式可以方便地将提交处理程序附加到div的 domready 像这样： 
 
 
  var infoWindowContent = [
< b>获取路线From ... < / b>< br />，
< form id ='map-form'>，
Address / Postcode：< input id ='map-from -address'type ='text'/>，
< input type ='submit'id ='map-go'value ='Go'/>，
< /形式>中
] .join（）; 
 
 
 var info = new google.maps.InfoWindow（{
 content：infoWindowContent 
}）; 
 
 google.maps.event.addListener（info，'domready'，function（）{
 document.id（map-form）。addEvent（submit，function（e ）{
 e.stop（）; 
 console.log（hi！）; 
}）; 
}）; 
 
 info.open（map，marker）; 
  
经过测试和工作。或者，您可以将内容插入dom作为某个隐藏div的子项，添加该事件，然后将div传递为内容，因为它支持指向节点。 
 
 
 
  https://developers.google.com/maps / documentation / javascript / infowindows  
 
 
 
或者，您可以使用事件代理 
 
 
 / p> 
 
 
  topnode.addEvent（'submit：relay（＃map-form）'，function（e）{}）;   - 或等价的jQuery，例如 $（document）.on（'submit'，'＃map-form'，fn） 
 
I want to put a form with input field and submit button inside a Google Maps API (v3) InfoWindow.

When submitted I would like to call a function that initiates the directions service using the address entered into the input field.

Here's my code (I'm currently only testing whether the directions event is being fired. I've written the full getDirections() event and can confirm it works and returns directions when fired properly):

I tried adding an event listener using MooTools, like this:
var infoWindowContent   = "<b>Get Directions From...</b><br />"
                        + "<form id='map-form'>"
                        + "Address/Postcode: <input id='map-from-address' type='text' />"
                        + "<input type='submit' id='map-go' value='Go' />"
                        + "</form>";

var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
    dbug.log($("map-form"));
    $("map-form").addEvent("submit", getDirections);
});

function getDirections(event)
{
    dbug.log("getDirections");
    event.stop();
}
As I'm using MooTools elsewhere in my site, I put all the code in window.addEvent('load', function(){...});

Note the console trace dbug.log($("map-form")); which is correctly outputting the form element, but the event isn't firing. 

I've added the same event to another form (with different ID) in the DOM and it works fine.

So, if MooTools can find the element and supposedly add the event listener, what's preventing the event from firing? Is this a scope issue?
解决方案
it does not look like a scope issue. getDirections is in the same scope. 

this is an egg vs chicken case. ultimately - your string of html is not in the DOM so you cannot add events to it just yet or reference elements from it. the info window is slightly asynchronous so you need to make sure the content div is attached. Or, you need to use Event delegation.

the event pattern google provides comes in handy to attach the submit handler on the div's domready like so:
var infoWindowContent = [
    "<b>Get Directions From...</b><br />",
    "<form id='map-form'>",
    "Address/Postcode: <input id='map-from-address' type='text' />",
    "<input type='submit' id='map-go' value='Go' />",
    "</form>"
].join("");


var info = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(info, 'domready', function() {
    document.id("map-form").addEvent("submit", function(e) {
        e.stop();
        console.log("hi!");
    });
});

info.open(map, marker);
tested and working. alternatively, you can attach the content sting into the dom as child of some hidden div, add the event and then pass on the div as the content as it supports being pointed to a node. 

https://developers.google.com/maps/documentation/javascript/infowindows

alternatively, you can use event delegation

eg.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - or the equivalent jQuery, for instance $(document).on('submit', '#map-form', fn)

                        
这篇关于将事件添加到Google Maps API InfoWindow中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！