
IE7 / IE8 Strikes again! (JQuery append workaround)
Posted: Wed, Feb 24 2010 at 01:21pmSo for quite a while now I've developed websites exclusively in FireFox, since it adheres to the W3C standards in the best way possible, and generally produces a browsing experience we have come to expect from a truly compliant browser. That being said, I do periodically go back and check the particularly complex interfaces in Internet Explorer 7/8 knowing full well that I'll have to hack up otherwise excellent code to work in Microsofts perpetually broken and misinformed browser goliath.
So with that, enter what I call the "IE Neglects AJAX Content" bug, whereby loading dynamic content from an AJAX call using JQuery that contains <script> elements will sometimes fail to execute the script when appended to an inline content object. Consider this example.
1. A page is loaded that has some dynamic functionality that returns a block of text with a script tag inside which is then added to the current document using $.append().
2. The script tag inside this returned content then performs some Java manipulation when the new block of text is appended to the currently rendered page.
3. Every browser under the sun EXCEPT Internet Explorer (please be sure to put on your shocked face here) will execute the script when the content is inserted, however IE, of course, neglects it and just "forgets" about it.
This issue had me thoroughly perplexed for quite some time, as there are many instances where returning dynamic script objects is highly beneficial to a great user interface experience. I found that putting the content directly inside an element using $.html() worked, since JQuery does all the heavy lifting here and parses out the script objects. Ok, so there's a start. The problem then became that appending the content using $.append(), the script never fires in IE! Argh! Apparently IE is incapable of detecting a DOM level change when this function is fired.
So, to make a long story short (oops!), I found that you HAVE to use $.appendTo() in IE7/8 as a workaround to this bug. So consider this:
$(someContent).appendTo("body");
WILL WORK - however:
$("body").append(someContent);
WILL NOT
The most aggravating part of this whole charade is that both lines of code should do EXACTLY the same thing at a fundamental level, but alas, IE has once again destroyed my hopes of writing elegant code.
I hope this helps someone else out down the line who has the same issue.

Assassin Creed Revelations
Assassin's Creed: Brotherhood
Battlefield 3
COD: Black Ops
COD: Modern Warfare 3
Dirt 3
FIFA 12
Forza Motorsport 4
Gears of War 3
Ghost Recon Future Soldier
Halo Reach
Madden NFL 12
Marvel vs Capcom 3
MLB 2K11
Mortal Kombat
NHL 12
Street Fighter x Tekken
Super Street Fighter 4
Tekken 6
Starhawk
Uncharted 3
BF: Bad Company 2
Counter-Strike: Global Offensive
Halo Combat Evolved
League of Legends
Minecraft
Nexuiz
Quake III
Quake Live
StarCraft II
Team Fortress 2
Tribes Ascend
Unreal Tournament 99
FEAR 3
Homefront
Mario Kart



°