jQuery not creating area tags
I'm trying to use jQuery to dynamically create an image map, and I ran into a weird behavior:
alert( $('<area />').size() ); // 1
alert( $('<area shape="circle" />').size() ); // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1
In other words, I can't create an area tag all at once; if I say
$('<area shape="circle" coords="50,25,4"开发者_如何学Go href="#" alt="foo" />')
then nothing is created. However, it works if I do it gradually, e.g.
$('<area />')
.attr("shape", "circle")
.attr("coords", "50,25,4")
.attr("href", "#")
.attr("alt", "foo");
I have no idea why this is, because I can create all kinds of other elements with attributes and content, e.g.
$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')
so I'm not clear on why this isn't working. This isn't all that important since I can make it wirk by chaining calls to attr
, but that's annoying and I'd like to understand this behavior.
An <area />
element is only defined inside an image map (i.e. <map>
element). So essentially the following is failing (as this is what jQuery is doing with your markup):
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
It's just one of those things obviously the great jQuery has not accounted for (yet). In the meantime try:
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
精彩评论