How to make overlay recognized as linked class

Demo: https://chattanoogahistory.com/HTML5-boilerplate/clicktest.php

Using OpenSeadragonHTMLelements.js to position SVG(s) over specific locations in canvas. I use classes to link/open other .dzi’s This works well for other elements, such as the button labeled ‘INDEX’. However, the red SVG has the same class assigned, but does not react to a click. I suspect a JavaScript issue, but cannot figure it out.

Any assistance would be greatly appreciated.

Code that links and opens other dzi:

// 16
$(document).on('click', '.loc16', function() {
	viewer.open([{
		tileSource: loc16
	}]);
	$("#div1").text("Plate 16");
	setTimeout(function() {
		viewer.viewport.fitBounds(box1);
	}, 400);
});

Overlay that is assigned the same class, but not clickable:

	var hEl = viewer.HTMLelements()	 
	var img = document.createElement('img')
    img.src = 'https://chattanoogahistory.com/svg/16.svg';	
	img.style.backgroundColor = 'rgba(255,0,0,0.2)'
	img.style.borderRadius = '50%'
	img.className = "loc16";

	 hEl.addElement({
            id: "loc16",
            element: img,
            x: 4600,
            y: 3300,
            width: 300,
            height: 300
          })

[Aiosa]

@pearcetm Aha! Anyway, I updated the docs so that we have it documented. Thank you.

[pearcetm]

Instead of using jQuery delegated events, try using a MouseTracker so your events aren’t eaten by the viewer’s event handling:

new OpenSeadragon.MouseTracker({
    element: yourElement,
    clickHandler: handlerFunc,
    ...
});

This should at least get you to the point where you are receiving the events. It will require a little refactoring of where you define the handler(s) but hopefully that won’t be too hard.