Last week playing crying with HTML5 semantic markup elements in Internet Explorer I found a few issues I haven’t ran across yet. So I’m putting them here so I don’t pull my hair out next time I have to deal with Internet Exploder.

The first issue is related to calling the submit function within the live function in jQuery and the other is caused when dynamically loading HTML5 elements using .load(), also in jQuery.

If you are calling the submit() function inside the .live() function in jQuery, IE doesn’t like it.

It might look something like this but excuse any semantic mistakes because it’s late and I can’t sleep right now.

$('#id').live(submit, function() { 
//submit my form foo 
alert('i got five on IE not showing this alert');
});

I read that using the liveQuery plugin fixes this, however, the fix was I used was more random…
I don’t know why, but if you run across this issue placing the above function as the first function in your document.ready() will fix the issue. If not try the liveQuery plugin.

So the fix looks something like this:

$(document).ready(function() {
     $('#id').live(submit, function() { 
     //submit my form foo 
     alert('i got five on it!');
     });
    // rest of all your jQuery goodness goes here.
});

The second issue that dramatically lead to a receding hairline was dynamically loading HTML5 elements into the document after the page is initially loaded. For example, one might hypothetically have a catalog page of products and each product might hypothetically have a link, that when clicked, loads a JavaScript popup that injects HTML into a div, article, section, or some similar node using the .load() or append() function. Even if you go ahead and add html5shiv or get creative and add the elements to the dom using JavaScript yourself, IE still isn’t going to like your HTML5 elements, nor know what to do with them. So instead of going slightly insane and crying to your boss go to this link and give this guy what you would have charged for a 40 hour week.

The link to the plugin above dynamically re-adds the elements into the DOM when you call .append() to add HTML5 elements into a page after they have been loaded.

If you are using the .load() function to add new HTML5 content to your page you will also need this script.

And your final working code when you reclaim your sanity will look something like this:

//.append example
$('#append_me').append(innerShiv("<header>Lookin proper in IE now suckas</header>"));
 
// .load example
$('#inject_with_html').loadShiv('stuff_to_inject.html');

Hopefully you just saved time and sanity. As I couldn’t find the second solution very easily with Google.