Question

我正在尝试使用jQuery动态创建一个图像映射，我遇到了一个奇怪的行为：

alert( $('<area />').size() );                         // 1
alert( $('<area shape="circle" />').size() );          // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1

换句话说，我不能一次创建一个区域标签;如果我说

$('<area shape="circle" coords="50,25,4" href="#" alt="foo" />')

然后什么也没创建。但是，如果我逐渐这样做，它会起作用，例如

$('<area />')
    .attr("shape", "circle")
    .attr("coords", "50,25,4")
    .attr("href", "#")
    .attr("alt", "foo");

我不知道为什么会这样，因为我可以用属性和内容创建各种其他元素，例如。

$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')

所以我不清楚为什么这不起作用。这并不是那么重要，因为我可以通过链接attr来调用它，但这很烦人，我想了解这种行为。

Answer 1

<area />元素仅在图像映射（即<map>元素）内定义。所以基本上以下是失败的（因为这是jQuery对你的标记做的）：

var div = document.createElement('div');
div.innerHTML = '<area shape="circle" coords="50,25,4" href="#" alt="foo" />';
return div.childNodes; // this is empty, as the browser didn't allow 
                       // the <area /> element inside the <div> element

这只是其中的一个显然是伟大的jQuery尚未解决的问题。在此期间尝试：

var $area = $(
    '<map><area shape="circle" coords="50,25,4" href="#" alt="foo" /></map>'
).contents();

// $area is the jQuery object for the newly created <area /> tag

$area.attr('coords'); // "50,25,4"

// etc

jQuery没有创建区域标签

1 个答案: