jQuery <AREA> appendTo doesn't work in IE7

Question

I have the following code working fine in IE8 (and IE8 in IE7 compatibility mode) but not generating the right results in 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'); });

On IE8 these HTML <AREA> elements are created and added successfully. But not on IE7. The click event is not happening there.

Answer 1

This may not be the problem, but I had a similar problem and solved it using jQuery's live function. Like so...

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() basically ensures that the event is attached to any element that exists now, or in the future (if you create elements on the fly, for example).

Answer 2

I've had problems using .appendTo() in IE in the past and I can't tell you why; but changing it to .append() worked for me.

Answer 3

The problem in this case is not with the <area>, but in the way IE7 converts the coordinates to a string. Using value.x.toString() instead of value.x solves the problem.
The code then will look like this:

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();