Добавление события в элемент внутри API Карт Google InfoWindow

Я хочу поместить форму с полем ввода и кнопкой отправки внутри API Карт Google (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"));, которая корректно выводит элемент формы, но событие не запускается.

Я добавил одно и то же событие в другую форму (с другим ID) в DOM, и он отлично работает.

Итак, если MooTools может найти элемент и, предположительно, добавить прослушиватель событий, что мешает запуску события? Это проблема с областью?

Ответы

Ответ 1

он не похож на проблему с областью. 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 как содержимое, поскольку оно поддерживает указание на node.

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

вы можете использовать делегирование событий

например.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - или эквивалентный jQuery, например $(document).on('submit', '#map-form', fn)