Aggiunta di evento all'elemento all'interno di Google Maps API Infowindow

Question

Voglio inserire un modulo con il campo di input e inviare il pulsante all'interno di un infowindow API di Google Maps (V3).

Quando inviato, vorrei chiamare una funzione che avvia il servizio delle indicazioni utilizzando l'indirizzo inserito nel campo di input.

Ecco il mio codice (sto attualmente testando se l'evento delle indicazioni è stato licenziato. Ho scritto il pieno getDirections() evento e può confermare che funziona e restituisce indicazioni quando viene sparato correttamente):

Ho provato ad aggiungere un ascoltatore di eventi usando mootools, come questo:

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

Mentre sto usando mootools altrove nel mio sito, ho inserito tutto il codice window.addEvent('load', function(){...});

Nota la traccia della console dbug.log($("map-form")); che sta conseguendo correttamente l'elemento modulo, ma l'evento non sta sparando.

Ho aggiunto lo stesso evento a un'altra forma (con ID diverso) nel DOM e funziona bene.

Quindi, se Mootools riesce a trovare l'elemento e presumibilmente aggiungere l'ascoltatore di eventi, cosa impedisce all'evento di sparare? È un problema di portata?

Answer 1

Non sembra un problema di portata. GetDirections ha lo stesso ambito.

Questa è una custodia per pollo e uova. In definitiva, la tua stringa di HTML non è nel DOM, quindi non è ancora possibile aggiungere eventi ad esso o di riferimento elementi da esso. La finestra Info è leggermente asincrona, quindi è necessario assicurarsi che il Div del contenuto sia allegato. Oppure, è necessario utilizzare la delega di eventi.

Il modello di evento che Google fornisce è utile per allegare il gestore di invio al Div domready così:

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);

testato e funzionante. In alternativa, è possibile collegare la puntura di contenuto al DOM come figlio di un Div nascosto, aggiungere l'evento e quindi passare il Div come contenuto in quanto supporta essere puntato a un nodo.

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

In alternativa, è possibile utilizzare la delegazione degli eventi

per esempio.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - o l'equivalente jQuery, ad esempio $(document).on('submit', '#map-form', fn)