IE中map元素的jquery name属性

Question

以下 jQuery 在 Firefox 中工作正常，但在 IE6 中失败:

$("<map></map>").attr("name",somevar).appendTo("#someElement");

问题是 map 元素永远不会生成生成的 name 属性，我可以通过调用 alert($("#someElement").html()); 来证明这一点事实上，它所关联的图像没有其链接

如果我用这个来代替，它工作得很好:

$("<map name='" + somevar + "'></map>").appendTo("#someElement");

我很高兴使用第二行代码，但想知道其他人是否遇到过这个问题...或者解释为什么它不起作用(我想知道它特定于名称属性)...

(第一个和第二个场景的 HTML 输出):

IE6使用第一行:

<MAP><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

IE6使用第二行:

<MAP name=tehmap><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

Answer 1

(这是更多评论 Material ，但由于它太长，我别无选择，只能将其作为答案发布。希望它可以为某人指明正确的方向。)

使用在 IE 7 模式下运行的 IE 8 进行调查的一些结果(也出现此问题):

$('<map />').attr('x', 'abc').wrap('<div />').parent().html()
"<MAP x="abc"></MAP>"

...它可以正确设置 map 标记的任何其他元素。但是等等...

>>$('<map />').attr('name', 'abc').attr('name')
"abc"

所以它正在准备中。但由于某种原因，.html() 返回的 HTML 忽略了它。为什么？实际对象是正确的，但它没有正确渲染标记。

更奇怪的是:

>>$('#dummy').append($('<map />').attr("name", "abc"))
>>$('#dummy').html()
"<MAP></MAP>"

但是如果我根据IE开发工具查看HTML，它是......

<map submitName="abc"/>

我进一步调查了这一点，发现了这个问题:

Weird behaviour of iframe `name` attribute set by jQuery in IE

以及已接受答案的相关引用:

So what appears to be happening is that IE-up-to-7 redirects all use of attributes called name to an otherwise-invisible property, internally called submitName, that for form fields changes the data the field will generate as part of a form submission, but which doesn't change the real name attribute used for HTMLCollection indexing, radio-grouping, getElementsByName, or, in the case of [i]frames, targeting.

任何在语义上使用 name 属性的元素似乎都是这种情况。例如:

>>$('#dummy').append($('<div />').attr("name", "abc"))
>>$('#dummy').append($('<input />').attr("name", "abc"))
>>$('#dummy').html()
"<DIV name="abc"></DIV><INPUT>"

所以这似乎是一个相对常见的 IE bug 的奇怪表现，就这么简单。由于您已经有了解决方法，所以我建议坚持使用它 - 但如果幸运的话，其他人可以出现并更好地解释这一点。