Organic Organic - 3 months ago 104
Javascript Question

Bing maps click event on custom infobox html

I can't for the life of me get a click event to work on custom html Micro$oft bing maps infobox elements. The following code triggers the event on any li outside of bing maps but not inside:

$('body').on('click', 'li', function (e) {
console.log("target:", e.target);
});


There is some documentation on attaching "actions" to basic default infoboxes but no info on custom html infobox events. It appears they have disabled all events for custom infoboxes. Can anyone confirm this? Why would they do this? And how can I get around it?

Answer

Try the example site

Examples

Not sure jquery snippet will work and if the infobox even contains a "li".

I placed the following JS in that html version and this creates an event and generates a message, place it into the run box to try:

map.entities.clear(); 
 function handlerEvent1 () 
 { 
 displayAlert('Handler1');
 } 
 function handlerEvent2 () 
  {  
 displayAlert('Handler2'); 
 } 
 function handlerEvent3 () 
{ 
 displayAlert('Handler3'); 
}
 var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
 var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
 map.entities.push(defaultInfobox);
 defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px;width:240px;"><b id="infoboxTitle" style="position:absolute; top:10px; left:10px; width:220px;">myTitle</b><div id="infoboxDescription" style="position:absolute; top:30px; left:10px; width:220px;" onclick="handlerEvent3 ()">Description</div></div>'); 

Also from the example code, the document.ready is not being waiting for so you should place your script at the bottom of the page or alternatively:

$( document ).ready(function() {
  $('body').on('click', 'li', function (e) {
     console.log("target:", e.target);
  });
});

The click may also not have worked, due to the "LI" being badly rendered in the infobox code (not provided).