jQuery <AREA> appendTo 在 IE7 中不起作用答案

【问题标题】：jQuery <AREA> appendTo doesn't work in IE7jQuery <AREA> appendTo 在 IE7 中不起作用
【发布时间】：2010-07-28 07:56:30
【问题描述】：

我的以下代码在 IE8（以及 IE7 兼容模式下的 IE8）中运行良好，但在 IE7 中没有生成正确的结果

var areaId = "eventArea" + index;
var tempArea = $("<AREA id='" + areaId + "' shape='rect' coords='" + value.x + "," + value.y + "," + (parseInt(value.x) + parseInt(value.w)) + "," + (parseInt(value.y) + parseInt(value.h)) + "' >");
tempArea.appendTo($("map[name='wavImageMap']"));
$("#" + areaId).click(function() { alert('test'); });

在 IE8 上，这些 HTML <AREA> 元素已成功创建并添加。但不是在 IE7 上。点击事件没有在那里发生。

【问题讨论】：

您能否更好地描述一下 IE8 和 IE7 之间的区别。不完全清楚。
@Jason，我需要将事件绑定到这些 AREA 元素以进行单击和鼠标悬停（以显示工具提示）。它在 IE8 中运行良好。在 IE7 中，事件不会触发。看起来该元素没有被创建。
因为没有视觉指示表明 AREA 元素已创建。有谁知道一种简单的方法来检测它是否已创建并位于正确的位置？到目前为止，我正在使用点击事件来检测它的存在

标签： jquery html internet-explorer-7

【解决方案1】：

这可能不是问题，但我遇到了类似的问题，并使用 jQuery 的live 函数解决了它。就这样……

var areaId = "eventArea" + index;
var tempArea = $("<AREA id='" + areaId + "' shape='rect' coords='" + value.x + "," + value.y + "," + (parseInt(value.x) + parseInt(value.w)) + "," + (parseInt(value.y) + parseInt(value.h)) + "' >");
tempArea.appendTo($("map[name='wavImageMap']"));
$("#" + areaId).live('click', function() { 
    alert('test');
});

live() 基本上确保事件附加到现在或将来存在的任何元素（例如，如果您动态创建元素）。

【讨论】：

【解决方案2】：

我过去在 IE 中使用 .appendTo() 时遇到过问题，我无法告诉你原因；但将其更改为 .append() 对我有用。

【讨论】：

用.append(element) 和.append(HTML) 测试，结果相同。在 IE8 上工作，在 IE7 上失败 :(

【解决方案3】：

这种情况下的问题不在于<area>，而在于IE7 将坐标转换为字符串的方式。使用value.x.toString() 而不是value.x 可以解决问题。
然后代码将如下所示：

var tempArea = $("<AREA id='" + areaId + "' shape='rect' >");
tempArea[0].coords = value.x.toString() + "," + value.y.toString() + "," + ((parseInt(value.x) + parseInt(value.w))).toString() + "," + ((parseInt(value.y) + parseInt(value.h))).toString();

【讨论】：