infobubble - can't bind click even with live inside the box

[GoogleCodeExporter]

put the content as:
<div class="click-me"></div>

assuming var infobubble is the infobubble:

$('.click-me').live('click', function()
{
  infobubble.close();
});

this does not respond at all. there is only one infobubble.

Original issue reported on code.google.com by krom...@gmail.com on 25 Jul 2011 at 6:34

[GoogleCodeExporter]

I'm having same issue, seems the function InfoBubble.prototype.addEvents_ is 
canceling all events.  If i temporarily remove the 'click' from the event array 
in th e function, then my click event works.  This function should be modified 
to be remove events a little more intelligently.

[code]
/**
 * Add events to stop propagation
 * @private
 */
InfoBubble.prototype.addEvents_ = function() {
  // We want to cancel all the events so they do not go to the map
  var events = ['mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup',
      'mousewheel', 'DOMMouseScroll', 'touchstart', 'touchend', 'touchmove',
      'dblclick', 'contextmenu', 'click'];

  var bubble = this.bubble_;
  this.listeners_ = [];
  for (var i = 0, event; event = events[i]; i++) {
    this.listeners_.push(
      google.maps.event.addDomListener(bubble, event, function(e) {
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
      })
    );
  }
};
[/code]

Original comment by da...@meshnet.ca on 25 Jul 2011 at 12:59

[GoogleCodeExporter]

Note that the implementation should be where you disable the regular map 
functions (the drag/double click zoom, etc) don't work, but the custom binds 
still do work (the coder who is binding the click/whatever).

Original comment by *...@wepay.com on 25 Jul 2011 at 4:40

[GoogleCodeExporter]

Hours later... 

Ok, so the .live event handler attaches (by default) to the root of the DOM, ( 
read  http://api.jquery.com/live : Event Delegation)

Since the infobubble's DOM event handler triggers at the infobubble's position 
in the DOM tree and causes events to stopPropagating down the tree to the root, 
we need to use the Event Context method to call .live() so that it is attached 
at a DOM level above the infobubble... I attached mine to the .bubble_ element 
and it works like a charm.

example: 
$("div.clickme", myBubble.bubble_).live("click", function() {
  // Live handler called.
});

Still below any dynamically added elements so that .live still works for future 
added elements, and the stopPropagation is still in effect for all other events.

Original comment by da...@meshnet.ca on 25 Jul 2011 at 7:50

[GoogleCodeExporter]

Nice! is the .bubble_ the built in function?

Original comment by *...@wepay.com on 25 Jul 2011 at 7:59

[GoogleCodeExporter]

Yes, its the handle for the <DIV> that the infobubble API uses to contain the 
... infobubble

and is just above where the stopPropagation listeners are added in the DOM.

Original comment by da...@meshnet.ca on 25 Jul 2011 at 8:06

[GoogleCodeExporter]

Works fine. Thanks for this hint :)

Original comment by eike.lue...@gmail.com on 16 Sep 2011 at 4:45

[GoogleCodeExporter]

I was able to bind click events like this -
[code]
                m_Marker.open();
                google.maps.event.addDomListener(m_Marker.e, 'click', 
                    function() {
                        alert("foo");
                    }
                );
[/code]

e seems to be the div containing content.

Original comment by ideam...@gmail.com on 23 Dec 2011 at 3:54

[GoogleCodeExporter]

I kind'a combined the solutions for one that works for me:

$(infoBubble.bubble_).live("click", function() {
    console.log('clicked!');
});

Have fun!

Original comment by ronny.ve...@gmail.com on 11 Sep 2012 at 12:49