Создание редактируемой работы таблицы кросс-браузер

Question

Я работаю над страницей ASP.NET, содержащей ListView. Когда пользователь нажимает на строку, содержимое последнего (видимого) столбца этого (после разбора) HTML table заменяется текстовым полем (с помощью jQuery), делая значение редактируемым.

До сих пор это работает как шарм в Chrome, но без радости в IE10.

В this jsfiddle значение становится редактируемым, но затем кнопка «Сохранить» не работает должным образом.

В IE текстовое поле не отображается. Смешная деталь: если я прокомментирую четыре вары (invNr, newInvNr, oldHtml и spanWidth), элемент inputУ меня есть, но, конечно, у меня нет данных для работы. Действительно ДЕЙСТВИТЕЛЬНО странно.

JQuery:

$(document).ready(function() { 
    $('tr[id*="itemRow"]').click(function() { 
     $clickedRow = $(this); 

     //this makes sure the input field isn't emptied when clicked again 
     if ($clickedRow.find('input[id$="editInvNr"]').length > 0) { 
      return; 
     } 

     var invNr = $clickedRow.find('span[id$="InvoiceNumber"]').text(), 
      newInvNr = '', 
      oldHtml = $clickedRow.find('span[id$="InvoiceNumber"]').html(), 
      spanWidth = $clickedRow.find('span[id$="InvoiceNumber"]').width(); 

     $clickedRow.find('span[id$="InvoiceNumber"]').parent('td').html('<input type="text" ID="editInvNr"></input>'); 
     $clickedRow.find('input[id="editInvNr"]').val(invNr).focus().on('input propertychange', function() { 
      $clickedRow.find('span[id$="SaveResultMsg"]').hide(); 
      $clickedRow.find('td[id$="SaveOption"]').show(); 
      $clickedRow.find('input[id*="btnSaveInvNrFormat"]').show(); 
      newInvNr = $(this).val(); 
      if (newInvNr == $clickedRow.find('span[id$="InvoiceNumber"]').text()) { 
       $clickedRow.find('td[id$="SaveOption"]').hide(); 
      } 
     }); 
    }); 

    $('tr[id*="itemRow"]').focusout(function() { 
     $rowLosingFocus = $(this); 
     var previousValue = $rowLosingFocus.find('input[id$="editInvNr"]').val(); 
     $rowLosingFocus.find('input[id$="editInvNr"]').closest('td').html('<asp:Label ID="lblInvoiceNumber" runat="server" />'); 
     $rowLosingFocus.find('span[id$="InvoiceNumber"]').text(previousValue); 
    }); 
}); 

function UpdateInvoiceNrFormat(leButton) { 
    $buttonClicked = $(leButton); 
    $buttonClicked.focus(); 

    var companyName = $buttonClicked.closest('tr').find('span[id$="lblCompanyName"]').text(), 
     invoiceType = $buttonClicked.closest('tr').find('span[id$="lblInvoiceType"]').text(), 
     invNrFormat = $buttonClicked.closest('tr').find('span[id$="lblInvoiceNumber"]').text(); 

    PageMethods.UpdateInvoiceNumberFormat(companyName, invoiceType, invNrFormat, onSuccess, onError); 
    function onSuccess(result) { 
     $buttonClicked.hide(); 
     $buttonClicked.siblings('span[id$="SaveResultMsg"]').text(result).show(); 
    } 
    function onError(result) { 
     $buttonClicked.hide(); 
     $buttonClicked.siblings('span[id$="SaveResultMsg"]').text('Error:' + result).show(); 
    } 
} 

Я пробовал различные комбинации заявлений JQuery, СЦЕПЛЕНИЕ и избегая цепочки, помещая его в нижней части страницы, как кто-то предложил, комментирующие различные части кода из чистое отчаяние. Еще нада.

Answer 1

Невозможно было сделать способ html() правильно заменить html в IE10, хотя я и не узнал, почему именно. Я закончил писать оба элемента в ячейку таблицы, установил style="display:none" для одного из них и использовал show()/hide(), и это достаточно хорошо для меня (и, видимо, для IE10).

Для тех, кто сталкивается с одной и той же проблемой: это обход , а не решение в строгом смысле слова.