title: Adding event to element inside Google Maps API InfoWindow
body: <p>I want to put a form with input field and submit button inside a Google Maps API (v3) InfoWindow.</p>
  
  <p>When submitted I would like to call a function that initiates the directions service using the address entered into the input field.</p>
  
  <p>Here's my code (I'm currently only testing whether the directions event is being fired. I've written the full <code>getDirections()</code> event and can confirm it works and returns directions when fired properly):</p>
  
  <p>I tried adding an event listener using MooTools, like this:</p>
  
  <pre><code>var infoWindowContent   = "&lt;b&gt;Get Directions From...&lt;/b&gt;&lt;br /&gt;"
                          + "&lt;form id='map-form'&gt;"
                          + "Address/Postcode: &lt;input id='map-from-address' type='text' /&gt;"
                          + "&lt;input type='submit' id='map-go' value='Go' /&gt;"
                          + "&lt;/form&gt;";
  
  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();
  }
  </code></pre>
  
  <p>As I'm using MooTools elsewhere in my site, I put all the code in <code>window.addEvent('load', function(){...});</code></p>
  
  <p>Note the console trace <code>dbug.log($("map-form"));</code> which is correctly outputting the form element, but the event isn't firing. </p>
  
  <p>I've added the same event to another form (with different ID) in the DOM and it works fine.</p>
  
  <p>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?</p>