Problem accessing dynamically added DOM elements in IE7

Problem accessing dynamically added DOM elements in IE7

Here's the scenario: I'm using knockout.js to add some repeated structure to a form. When working with IE7 (or even IE9 or IE10 in the IE7 browser mode), jQuery cannot find the element with normal selectors and return empty sets, undefined, or nulls, depending on what you try to access.

I first discovered this problem using jquery 1.7.2 (I think), but it persists in 1.9.1. Haven't tried the 2.x branch, because it explicitly does not support IE < 9.

I have a very stripped down example reproducing the problem on jsbin with 1.9.1 here:  http://jsbin.com/eqonul/9

Don't try to edit in IE7, btw, jsbin will explode on you.

When you change the radio button to yes or the drop down to a non-zero value, extra inputs are displayed on the page. If you open the console (which of course doesn't exist), you can see some debugging statements when you perform these actions that spit back some 'undefined's on you. These come from the following statements:
  1. window.console && console.log($("#dobChildDOBDay"+i).attr("instanceID"));
  2.             // document.getElementByID fails as well
  3.             //window.console && console.log(document.getElementById['dobChildDOBDay'+i].attributes.instanceid); 
Curiously, however, you can get access to the templated dom elements by selecting a wrapper div and accessing this.elements. The production code that triggered this finding did exactly that and then iterated over the collection trying to access the instanceid attribute for each field via $(this).attr('instanceId'), which also failed. Creating a jQuery object out of such a dom element fails and returns an empty set.


So what is going on here? Is there any work around in jQuery to access these DOM elements? Or do I need to take this to the knockout forums and ask 'what are you doing to my DOM?'

Thanks in advance.