jQuery .html() returns strange results in IE after other bindings

— Sometimes we're stuck with junk attributes in jQuery.html() for Internet Explorer.”

This article originally addressed jQuery 1.3.1. See below for results in jQuery 1.4 (18 January 2010)

Internet Explorer: where it belongs?

When I’m testing work done with jQuery in Internet Explorer, I’m normally a karmic cow. I wonder if Mr Resig and friends ever thought about their specific contribution to world peace.

Indeed with jQuery, you can almost forget about the bad old days. At least until something comes along like it did this morning, when I hit a situation using .html().

Using .html() to return elements with bound events

If we use jQuery to bind events to an element and then take a look at the DOM, Internet Explorer may well return unexpected results. Here’s the code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#countries li a').click(function(){alert('clicked!');})
alert($('#countries').html());
});
//]]>
</script>
...
<ol id="countries">
<li id="cty-1"><a href="#">Algeria</a></li>
<li id="cty-2"><a href="#">Argentina</a></li>
<li id="cty-3"><a href="#">Australia</a></li>
<li id="cty-4"><a href="#">Belarus</a></li>
<li id="cty-5"><a href="#">Brazil</a></li>
<li id="cty-6"><a href="#">Canada</a></li>
<li id="cty-7"><a href="#">Chile</a></li>
</ol>

Consider the result from Firefox below. Predictable isn’t it?

Well-formed results in Firefox

Now look at Internet Explorer 7 and notice the junk that’s found its way in there:

Unexpected results in Internet Explorer

Results in jQuery 1.4

Results for IE7 + jQuery 1.4

It’s like Sizzle just ate a bag of shell-on peanuts in your taxicab. The behaviour has been described briefly by Matthew Pennell.

It’s only a problem if for some reason you need clean, well-formed XHTML.

Don’t depend on .html() for well-formed XML snippets

For example if – like me – you were using XHTML from the page as a dataset for use in a dynamic Flash object (via progressive enhancement) then that could be a problem: Flash balks at this stuff in IE.

Moral of the story: check your code

My quick fix was to change the order of business. I simply did my jQuery event binding after the data had been sent. A hard lesson learned, then, in view of the amount of time I spent tearing my hair out, but an important one nonetheless.

Comments

13 responses so far to jQuery .html() returns strange results in IE after other bindings

  1. Gravatar John Resig says:
    February 17th, 2009 at 17:52

    This has been fixed and it’s in jQuery 1.3.2 (which should be released very soon here).

  2. Gravatar Mike Padgett says:
    February 18th, 2009 at 9:50

    Well, how about that! If you ever get tired of web development, John, you’ll have a great career in international diplomacy.

  3. Gravatar Brian OConnor says:
    March 2nd, 2009 at 20:04

    There are still issues with 1.3.2.
    Now I see a lot of sizset=”" sizcache=”" messages. I don’t even think this has to do with event assignment but simple use of selectors.

  4. Gravatar scott says:
    March 26th, 2009 at 21:47

    i’m getting the exact same thing in IE using .html() “sizset= sizcache=” what is the deal?

  5. Gravatar Mike Padgett says:
    March 26th, 2009 at 22:47

    Hi Scott,

    Well, John says it’s sorted…

    http://dev.jquery.com/ticket/4282

    … and Brian says not. I haven’t yet tested 1.3.2 myself with the example above. Have you?

  6. Gravatar scott e. says:
    April 2nd, 2009 at 22:07

    i am also receiving this same problem in ie that the other scott is getting… i am using 1.3.2.. it’s not fixed. any other word on this?

  7. Gravatar Mike Padgett says:
    April 3rd, 2009 at 11:46

    Hmm, I think what we have here is that, though the precise details in my example and the dev-ticket quoted in #5 are different, the general issue is the same and it isn’t resolved as yet.

  8. Gravatar Saiko says:
    June 29th, 2009 at 11:10

    This problem still occurs in jquery v1.3.2 by my knowledge.

  9. Gravatar Jurik says:
    September 24th, 2009 at 13:03

    Well – I got this “sizset= /sizcache=”-bug too. But it is a little bit different to the descriped bug by Mike. Here the sizzler still doesn’t clean up, but the reason is clear:

    just invalid html (I didn’t close a span-tag)

    Safari and Firefox closed this tag correct and the ‘not so error tolerant’ IE messed up.

    So I suggest you to check your code if this “sizset=”-Bug still appears in IE.

    best regards,
    Jurik

    PS: For the hopeless ones – try to code a jQuery plugin that closes your tags if not closed in IE ;)

  10. Gravatar raph says:
    July 12th, 2010 at 14:10

    Great thanks !

  11. Gravatar Hasan Cem Cerit says:
    September 15th, 2010 at 15:58

    Hi Everyone,

    If you are parsing xml using jquery, and you need html() in IE, try this:

    var content = ($.browser.msie) ? $(this).context.xml : $(this).html();

    This solved my problem. I hope it will help someone too.

    Greetings.

  12. Gravatar Mike Padgett says:
    September 15th, 2010 at 17:14

    @Hasan and everyone: if you’re thinking about browser sniffing, please consider using jQuery.support.

  13. Gravatar Sid says:
    April 29th, 2011 at 1:38

    I know this is a old thread but thought this might help. I had to change the head information in my html to get around the sizset= /sizcache= errors

    This is what worked for me

Why not give me your comments?

You can use these tags in your comment:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(required)

See also:

Progressive enhancement and Flash: no longer a pact with the Devil

Flash

Using xHTML as an accessible data source for Flash objects just got a bit easier thanks to Faust.

  • Originally published: 17 Feb 2009 in Technical

IE7 only: float bug on elements with italic, background properties

No bug

What do you get if you cross a float and an italic in Internet Explorer?

  • Originally published: 13 Jul 2009 in Technical

Highcharts and HTML5: IE’s innerHTML unknown runtime error

error innerhtml

Internet Explorer’s hoary old unknown runtime error comes back to haunt me in HTML5

  • Originally published: 22 Jul 2011 in Technical

Testing CSS for print media: we need a Print Preview for developers!

Engraving of a printing press c. 1568

How I wish there was an easier way to test CSS intended for the printed page.

  • Originally published: 15 Jun 2009 in Technical

Simply monstrous: web support at Monster

Rex

Online recruitment site Monster could use a lesson in technical support when answering bug reports.

Who you gonna call?

Photo

Hello you, I'm Mike Padgett. I'm not a Princeton curator, Knoxville mayoral candidate, Kentuckian pastor or Arizona journalist, I just share the same name. In fact, I am a consultant working in user experience and information design.

I also enjoy travel, concerts, films and walking.

I'm originally from Yorkshire, England but nowadays I live in Belgium. My current favourite Belgian beer is Black Albert.

Shameless self-promotion

Dopeology.org

Over a year in the making, Dopeology.org is my latest personal project: a topology of doping in thirty years of European pro road cycling.

I collected information from thousands of sources, then I modelled and published it via a lightweight user interface.

RSS feeds