Question

I am using jQuery mobile for navigation, including back buttons, so the following is set:

$.mobile.page.prototype.options.addBackBtn = true;

In order to use jQuery mobile navigation to get to pages linked from an HTML image map, I was using the following code, bound to pagecreate:

$(page).find('MAP').bind('click', function(e) {
    alert("Map click");
 });

$(page).find('AREA').bind('click', function(e) {
    alert("Area click");
    e.preventDefault();
    $.mobile.changePage($(this).attr('href'));
 });

What seems to happen is the first time my image map loads, everything works as expected, and when I touch one of the areas, I get both alerts, first “Area click” then “Map click”, and then the nice jQuery mobile nav animation takes me where I’m going.

However, whether I use jQuery mobile’s back button (enabled by the addBackBtn option above) or the browser’s back button to return to the image map, these events no longer seem to fire. The area objects neither cause their original, pre-override behavior of acting like a regular hyperlink, nor do I get any of my alerts.

This is in Webkit browsers on a couple of iOS and Android phones – somehow desktop browsers do not exhibit this issue.

Anyone know the bug/fix/workaround for having my HTML image map continue to work, even after it’s been navigated away from and back again by jQuery mobile? All help greatly appreciated.

Answer 1

The issue turns out to be that, when you use jQuery mobile for navigation, it can sometimes end up injecting duplicate IDs into the DOM, which is why they advise you to never use IDs in the first place.

Unfortunately, images must refer to their maps by id (or name), so using the above approach you can end up manipulating one map, while your img tag is pointing at another one with the same ID that is somewhere else in the DOM.

The fix isn’t pretty, but it’s to set the id of the map to something unique, and then set the usemap attribute of the corresponding image, before trying to update the handlers of each map area.