Have you found yourself the unfortunate victim of an Unexpected call to method or property access on a seemingly simple .append() call in jQuery in Internet Explorer 7 or 8, but not 9 or any other modern browser? Because I just spent a few hours wanting to pull my hair figuring out why Internet Explorer was giving me more reasons to hate it. After scouring the internet for a short time to figure the issue out, I stepped away to clear my mind. When I returned to this persistent bug, I thought to check just how many results the selector was returning. I assumed it was returning one, but lo and behold, it was returning two!

The setup: a hidden div that appears in a modal when called. In that div are text fields that are validated when blur() or keyup() occur. When an error occurs, an unsorted list is populated noting the errors, but this unsorted list may not exist so it needs to be created. Enter the error on IE7/8:

if ($('#goalSetter .error ul').length == 0) {
    $('#goalSetter .error').append('<ul>');
}

IE7 and IE8 both see two matches for the selector. My only guess is that the modal is cloning #goalSetter and so two results are found. I have not investigated it further because I am simply happy to be past this bug. Once I realized there were two results, the fix was simple:

if ($('#goalSetter .error ul').length == 0) {
    $('#goalSetter .error').eq(0).append('<ul>');
}

Presto! What an annoying error. Still occurs in the latest jQuery too, but it really isn't jQuery's fault, and not really Internet Explorer's either, because jQuery UI can sometimes create duplicate elements, as was the case above and for another problem I ran into yesterday. *shakes fist at jQuery UI*