jQuery 移动导航将“点击”事件隐藏到 HTML 图像地图

Question

我使用jQuery mobile进行导航，包括后退按钮，所以设置如下：

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

为了使用 jQuery 移动导航来访问从 HTML 图像映射链接的页面，我使用了以下代码，绑定到 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'));
 });

似乎发生的事情是我的图像地图第一次加载时，一切都按预期工作，当我触摸其中一个区域时，我会收到两个警报，首先是“区域单击”，然后是“地图单击”，然后是漂亮的jQuery 移动导航动画将我带到我要去的地方。

但是，无论我使用 jQuery mobile 的后退按钮（由上面的 addBackBtn 选项启用）还是浏览器的后退按钮返回图像映射，这些事件似乎都不再触发。区域对象既不会导致其原始的、预先覆盖的行为，就像常规超链接一样，我也不会收到任何警报。

这出现在一些 iOS 和 Android 手机上的 Webkit 浏览器中 - 不知何故，桌面浏览器不会出现此问题。

任何人都知道让我的 HTML 图像映射继续工作的错误/修复/解决方法，即使它已被 jQuery 移动导航并再次导航回来？非常感谢所有帮助。

Answer 1

事实证明，当您使用 jQuery mobile 进行导航时，它有时会最终将重复的 ID 注入到 DOM 中，这就是为什么他们建议您一开始就不要使用 ID。

不幸的是，图像必须通过 id（或名称）引用它们的地图，因此使用上述方法您最终可以操纵一张地图，而您的 img 标签指向另一个具有相同 ID 的地图DOM。

修复并不漂亮，但它是将地图的 id 设置为唯一的，然后设置相应图像的 usemap 属性，然后再尝试更新每个地图区域的处理程序。