Openseadragon: Add click events to overlays added in runtime

[fariskas]

I have a bunch of overlays added in runtime. Eg:

    for (var i = 0; i < data.length; i++) {
      var elt = document.createElement("div");
      elt.id = "overlay"+i;
      elt.className = "highlight";
      viewer.addOverlay({
          element: elt,
          location: new OpenSeadragon.Rect(data[i].pos_x, data[i].pos_y, 0.2, 0.2)
      });
    }

I am trying to add a click event whenever the user taps (on IOS mobile) on the overlays.
Initially I did a normal jquery click function, which works in desktop, but doesnt work in IOS mobile because OSD eats some of the events that come through.
So instead i'm trying to use OSD's overlay functions.

I followed the example here where a addOnceHandler / MouseTracker is added for 1 overlay.
https://openseadragon.github.io/examples/ui-overlays/

This method works for overlays added in the OSD initialisation options. But how do i the same if i with MULTIPLE overlays added in runtime, as demonstrated in the code above?

Also, for the overlays, is it possible to use the 'class' selector, instead of the 'id'? I would like to apply some common click events for overlays that share the same classes.

[iangilman]

You can pass the element directly into the MouseTracker instead of using an id or class. For example:

for (var i = 0; i < data.length; i++) {
     var elt = document.createElement("div");
     elt.id = "overlay"+i;
     elt.className = "highlight";
     viewer.addOverlay({
         element: elt,
         location: new OpenSeadragon.Rect(data[i].pos_x, data[i].pos_y, 0.2, 0.2)
     });

     var tracker = new OpenSeadragon.MouseTracker({
        element: elt,
        clickHandler: function(event) {
            // ...
        }
     });
}

...though you might not want to be creating a function inside a for loop like that. Possibly better to use forEach:

data.forEach(function(datum, i) {
    // create the overlay and mouse tracker
});

[fariskas]

Thank you for the helpful suggestions. I'll try them out!