jQuery and IE… Again
So, at work today, I discovered another interesting facet of jQuery and IE.
This is in specific regards to jQuery 1.4.2 and IE7. I haven’t tested this in other versions of IE, but it’s probably as applicable. For jQuery, this will only be a problem in 1.4.2+, as earlier versions of jQuery don’t support this feature.
Let’s get to it.
The situation
I’m generating some HTML forms on-the-fly by passing some JSON objects to a function that returns a jQuery object, which I then append to a modal dialog. It’s pretty elegant, and I may release it as an open-source jQuery plugin at some point. Anyway, part of this function uses jQuery 1.4.2’s ability to generate jQuery DOM objects when HTML strings are passed to the function. Example:
$('<div class="myclass" />');
This is great because it allows me to create a string of HTML and pass it to jQuery, effectively increasing the speed of the program by avoiding function calls (can you imagine calling the attr() method for every attribute, and then the append() method for every element, including child elements??).
The problem
So what’s the problem? Well, this works in IE, so you’d think there isn’t a problem. In fact, I was also convinced (read: tricked) that IE handled this fine, as initial testing returned the expected results. However, because sending an empty string to the jQuery function returns an empty jQuery object, debugging this type of code can be very dangerous, as instead of generating errors, the script will die or stop functioning silently. No errors makes debugging very difficult!
I was using the following code to generate a form tag, append it to an object, and then return it. It looked something like this:
var newForm = $('<form method="post" action="">');This works in other browsers, but IE chokes. Silently. I discovered this when I started doing some testing on generating the object, independent of my script (which I’d been attempting to debug for well over an hour at this point).
Alerting the length property of the jQuery object has been helpful here. I first tried $('<div />').length and got the result 1. That makes sense. Then I tried $('<div>').length. This also, correctly, returns 1.
Then I tried something else. Since all this hypothetical testing was driving me bananas, I tried the actual form HTML I was using. $('<form method="post" action="">').length returned… 0!! How frustrating! Taking the attributes out and simply using $('<form>').length returns 1 as well, however. To get the correct result, I had to use the self-enclosing form tag: $('<form method="post" action="" />').length. This returned the correct result (1). Finally. That one character fixed my entire program in IE. Wow!
In Summary
TL;DR version: IE chokes and returns an empty jQuery object when you pass an HTML string that has attributes without a self-closure. I hope this saves some folks valuable time debugging this ridiculous phantom. I’m curious if this should be filed as a jQuery bug or not.
Happy coding!