Javascript 向 Google Maps API InfoWindow 内的元素添加事件

Adding event to element inside Google Maps API InfoWindow

提问by timwjohn

I want to put a form with input field and submit button inside a Google Maps API (v3) InfoWindow.

我想在 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):

这是我的代码（我目前只测试是否触发了方向事件。我已经编写了完整的getDirections()事件并且可以确认它可以正常工作并在正确触发时返回方向）：

I tried adding an event listener using MooTools, like this:

我尝试使用 MooTools 添加事件侦听器，如下所示：

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(){...});

当我在我网站的其他地方使用 MooTools 时，我把所有的代码都放在了 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.

请注意dbug.log($("map-form"));正确输出表单元素的控制台跟踪，但未触发事件。

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

我已经将相同的事件添加到 DOM 中的另一个表单（具有不同的 ID）并且它工作正常。

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?

那么，如果 MooTools 可以找到元素并添加事件侦听器，是什么阻止了事件触发？这是范围问题吗？

回答by Dimitar Christoff

it does not look like a scope issue. getDirections is in the same scope.

它看起来不像是范围问题。getDirections 在同一范围内。

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.

这是一个鸡蛋对鸡的案例。最终 - 您的 html 字符串不在 DOM 中，因此您无法向其添加事件或从中引用元素。信息窗口略微异步，因此您需要确保附加了内容 div。或者，您需要使用事件委托。

the event pattern google provides comes in handy to attach the submit handler on the div's domreadylike so:

谷歌提供的事件模式可以方便地将提交处理程序附加到 div 上，domready如下所示：

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.

测试和工作。或者，您可以将内容作为某些隐藏 div 的子项附加到 dom 中，添加事件，然后将 div 作为内容传递，因为它支持指向节点。

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

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)

topnode.addEvent('submit:relay(#map-form)', function(e){ });- 或等效的 jQuery，例如 $(document).on('submit', '#map-form', fn)