Сбой jQuery IE 9 при замене значения «tbody» после нажатия на элемент внутри него

Question

У меня есть приложение, в котором я хотел бы, чтобы действие пользователя - проверка на флажок - вызывала цепочку действий, которая, среди прочего, приводит к таблице, в которой флажок кажется перезаписанным.Это прекрасно работает во всех браузерах, которые я тестировал, кроме IE 9.

Я воспроизвел поведение в этом jsfiddle: http://jsfiddle.net/vM7Bu/3/

, но по сути идея заключается в

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

Даже в IE 9 это работает нормально, если только пользователь не нажал на что-то внутри текущего тела таблицы.В этом случае IE входит в какой-то бесконечный цикл.

Является ли это известной проблемой в IE 9?Какие обходные пути могут быть доступны?

РЕДАКТИРОВАТЬ : я немного сузил проблему - это не столько последовательность событий, вызванных нажатием кнопки, сколько факт, что мы пытаемсязаменить innerHTML tbody (я думаю), когда элемент внутри него имеет фокус.Поиск этого элемента и его поиск, похоже, несколько помогли.Требуется дополнительное расследование.

Answer 1

Насколько я могу судить, хотя мне все еще не удалось воспроизвести его без использования jQuery, проблема в том, что в IE 9 нельзя удалить определенные виды элементов из DOM, если эти элементы все еще имеют фокус клавиатуры. Это кажется правилом. Я сообщу об этом MS, если смогу воспроизвести его в автономном коде.

Answer 2

Возможные обходные пути. В обработчике кликов вызовите setTimeout (xxx, 0); и выполняйте свою работу с помощью функции setTimeout. Если в IE происходит сбой из-за того, что вы удаляете те части таблицы, для которых вы находитесь в середине обработчика щелчков, то setTimeout выведет вас из обработчика щелчков, прежде чем удалить эту часть таблицы.

Псевдо-код:

$("#whatever").click(function() {
    setTimeout(function() {
        $('tbody#mytablebody').empty();
        for (var i in something) {
            $('tbody#mytablebody').append(makeNewRow(i));
        }
    }, 0);
});