Custom InfoBox Builder Breaks Event Handler

[mjohnst]

A custom InfoBox won't allow the elements inside it to listen for a .on('click') event.

Created these markers with a link as the text.

@locationMarkers = Gmaps4rails.build_markers(locations) do |location, marker|
      marker.lat location.lat
      marker.lng location.lng
      marker.infowindow '<a href="#" class="open-story"></a>'
      marker.picture({
       "url" => ActionController::Base.helpers.asset_path("marker-orange.png"),
       "width" =>  30,
       "height" => 30})
    end

Created a custom InfoBox as per the code here: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Change-handler-behavior

Built the map:

litMap = Gmaps.build 'Google', { builders: { Marker: InfoBoxBuilder} }

litMap.buildMap
    provider:
      styles: mapStyles
      center: new google.maps.LatLng(37.776414, -122.436157)
      zoom: 13
      minZoom: 13
      mapTypeControl: false
      panControlOptions:
        position: google.maps.ControlPosition.TOP_RIGHT

      streetViewControlOptions:
        position: google.maps.ControlPosition.TOP_RIGHT

      zoomControlOptions:
        position: google.maps.ControlPosition.TOP_RIGHT

    internal:
      id: "map"
  , ->
    markers = #{raw @locationMarkers.to_json}
    litMap.addMarkers markers
    mapObj = litMap.getMap()
    #bottom left
    bounds = new google.maps.LatLngBounds(new google.maps.LatLng(37.678794, -122.618263), new google.maps.LatLng(37.841512, -122.345864)) #top right
    google.maps.event.addListener mapObj, "dragend", ->
      return  if bounds.contains(mapObj.getCenter())
      c = mapObj.getCenter()
      x = c.lng()
      y = c.lat()
      maxX = bounds.getNorthEast().lng()
      maxY = bounds.getNorthEast().lat()
      minX = bounds.getSouthWest().lng()
      minY = bounds.getSouthWest().lat()
      x = minX  if x < minX
      x = maxX  if x > maxX
      y = minY  if y < minY
      y = maxY  if y > maxY
      mapObj.setCenter new google.maps.LatLng(y, x)

And added this handler:

 $("body").on "click", ".open-story", (e) ->
    e.preventDefault()
    console.log "clicked..."
    false

The handler won't fire when the link is clicked.

Also, if I add the handler in the developer console after the link has been added to the DOM, it won't work with:

$('body').on('click', '.open-story', ...);

but will work with

$('.open-story').click(...);

handler.

The custom InfoBox seems to prevent just .on events from firing.

[apneadiving]

Just taking relevant code, this works fine for me:

create_infowindow: ->
  return null unless _.isString @args.infowindow

  boxText = document.createElement("div")
  boxText.setAttribute("class", 'yellow') #to customize
  boxText.innerHTML = @args.infowindow
  $(boxText).on 'click', -> console.log('foo')
  @infowindow = new InfoBox(@infobox(boxText))