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 mobile导航离开又回来了？所有人都非常感谢。

Answer 1

问题是，当你使用jQuery mobile进行导航时，它有时会最终将重复的ID注入到DOM中，这就是为什么他们建议你永远不要使用ID。

不幸的是，图片必须通过id（或名称）引用他们的地图，所以使用上面的方法你最终可以操纵一个地图，而你的img标签指向另一个地图，其中ID与其他地方相同。 DOM。

修复不是很好，但是要将地图的id设置为唯一的，然后在尝试更新每个地图区域的处理程序之前设置相应图像的usemap属性。

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

1 个答案: