在Google Maps API InfoWindow中添加元素事件

Question

在Google Maps API InfoWindow中添加元素事件

javascriptgoogle-maps-api-3mootoolsinfowindowmootools-events

23

我想把一个带有输入字段和提交按钮的表单放在 Google Maps API (v3) 的 InfoWindow 中。

当提交时，我想调用一个函数，使用输入字段中输入的地址来初始化方向服务。

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

我尝试使用 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();
}

因为我在网站的其他地方使用了MooTools，所以我将所有代码放在window.addEvent('load', function(){...});中。

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

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

因此，如果MooTools可以找到元素并且据说已添加了事件侦听器，那么是什么阻止了事件的触发？这是一个范围问题吗？

- timwjohn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitar Christoff · Accepted Answer

看起来不像是作用域问题。getDirections在同一作用域中。

这就像鸡生蛋还是蛋生鸡的问题。最终——您的HTML字符串不在DOM中，因此您无法立即添加事件或引用其中的元素。信息窗口稍微异步，因此您需要确保内容div已附加。或者，您可以使用事件委托。

Google提供的事件模式非常方便，可以像这样在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);

已测试并可行。另外，您可以将内容字符串附加到DOM中某个隐藏的div作为子元素，添加事件，然后将该div作为内容传递，因为它支持指向节点。

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

另外，您可以使用事件委托。

例如：

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