How to catch clicks on multiple images?

Question

I have an iOS uiwebview with multiple imagemaps that I need to catch clicks on, so I can handle scaling on different iOS devices. The click handler I install works on the first image, but not on subsequent images. How do I make the click handler work on multiple images? The relevant code is below:

$.fn.imageMapSetup2 = function () {
    $('img').each(function () {
        if (typeof ($(this).attr('usemap')) == 'undefined') {
            return;
        }
        var img = $(this);

        // add click handler
        img.on('click', function (event) {
            img.imgClick(event);
        });
    });
};

$.fn.imgClick = function (mouseDown) {
    mouseDown.preventDefault();
    var $img = this;
    var map = $img.attr('usemap').replace('#', '');
    $('map[name="' + map + '"]').find('area').each(function () {
        var $this = $(this),
            coords = $this.attr('coords').split(',');
        // lots of scaling code omitted 
        if (mouseX >= left && mouseX <= right &&
            mouseY >= top && mouseY <= bottom) {
            window.location = $this.attr('href');
        }
    });
};

FYI I have debugged the code in Safari and function imgClick() is not getting called for the second and subsequent images.

Answer 1

Add a click event listener to the parent element of the images. This could be the body element. Pass the event as an argument. Then, check the event, and use that variable to make changes to your image.

    document.addEventListener("click", function (event) {
      if (!event.target.tagName === "img") return;
      if (typeof event.target.getAttribute("usemap") == "undefined") {
        return;
      }
      imgClick(event);
    });