title: Making editable table work cross-browser
body: <p>I've been working on an ASP.NET page containing a <code>ListView</code>. When the user clicks a row, the content of the last (visible) column of this (once parsed) HTML <code>table</code> is replaced with a textbox (by means of jQuery), making the value editable.</p>
  
  <p>So far, this works like a charm in Chrome but no joy in IE10.</p>
  
  <p>In <a href="http://jsfiddle.net/wimombelets/fSqkZ/" rel="nofollow">this jsfiddle</a>, the value becomes editable but then the Save button doesn't work as expected.</p>
  
  <p>In IE the textbox doesn't appear. Funny detail: if I comment out the four vars (<code>invNr</code>, <code>newInvNr</code>, <code>oldHtml</code> and <code>spanWidth</code>), the <code>input</code> element <em>DOES</em> appear in IE10 but of course I have no data to work with. Really REALLY weird.</p>
  
  <p>The jQuery:</p>
  
  <pre><code>$(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 &gt; 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('&lt;input type="text" ID="editInvNr"&gt;&lt;/input&gt;');
          $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('&lt;asp:Label ID="lblInvoiceNumber" runat="server" /&gt;');
          $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();
      }
  }
  </code></pre>
  
  <p>I've tried various combinations of jQuery statements, chaining and avoiding chaining, placing it at the bottom of the page as someone suggested, commenting out various parts of the code out of sheer desperation. Still nada.</p>