Question

I have an application in which I’d like a user action – checking on a checkbox – to cause a chain of actions that results, among other things, in the table in which the checkbox appears to be rewritten. This works fine in all browsers I’ve tested except IE 9.

I’ve reproduced the behavior in this jsfiddle: http://jsfiddle.net/vM7Bu/3/

but essentially the idea is

$('tbody#mytablebody').empty();
for (var i in something) {
  $('tbody#mytablebody').append(makeNewRow(i));
}

Even in IE 9 this works fine unless it’s triggered by a user clicking on something inside the current body of the table. In that case, IE goes into some kind of infinite loop.

Is this a known issue in IE 9? What workarounds might be available?

EDIT: I narrowed the problem down a little – it’s not so much the sequence of events triggered from a click, but rather the fact that we’re attempting to replace the innerHTML of a tbody (I think) when an element inside it has focus. Finding that element and bluring it seems to have helped somewhat. More investigation required.

Answer 1

As best I can tell, though I still have not managed to reproduce it without the use of jQuery, the issue is that in IE 9 you cannot remove certain kinds of elements from the DOM if those elements still have keyboard focus. That seems to be the rule. I will report it to MS if I can actually reproduce it in standalone code.