Bing maps click event on custom infobox html

Question

I can't for the life of me get a click event to work on custom HTML Microsoft 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 1

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

Answer 2

Their documentation now says:

InfoboxActions have been included in Bing Maps V8 primarily for backwards compatibility with V7. Instead it is recommended to use standard HTML buttons and links in the infobox description.

So the nice answer PeterS provided is probably no longer the best way to proceed. Instead, I added my own links to the pushPin metadata, using the 'onclick' property. The pertinent code is on line 9 below.

var pLoc = new Microsoft.Maps.Location(c.Latitude, c.Longitude);
var pin = new Microsoft.Maps.Pushpin(pLoc, {
    title: c.Name,
    enableHoverStyle: true
});

pin.metadata = {
    title: c.Name,
    description: c.Description + 
          '<a href="#" onclick="javascript:showDetails(' + c.Id + ');">Details</a>'
};

Microsoft.Maps.Events.addHandler(pin, 'click', function (args) {
    myInfobox.setOptions({
        location: args.target.getLocation(),
        title: args.target.metadata.title,
        description: args.target.metadata.description,
        visible: true
    });
});

...

function showDetails(id) {
    alert(id);
}

For simplicity, I omitted the details on how I constructed myInfoBox and also how I added my pushpin to my map layer.