title: Can't figure out why textarea won't stay editable
body: <p>The following jQuery code works as expected (per comments in the code) and essentially what it does is</p>
  
  <ol>
  <li>detects which table row is clicked, </li>
  <li>iterates through the table's rows and determines if the row has an input in it,</li>
  <li>if it does, grabs and stores the values of the textboxes and textarea in that row</li>
  <li>removes the elements from the tds in that row</li>
  <li>and replaces the inputs with labels with the stored values</li>
  <li>then, on the clicked row, the values of the labels are stored and</li>
  <li>the labels are replaced with inputs populated with the stored values</li>
  </ol>
  
  <p>Here's the relevant jQuery:</p>
  
  <pre><code>// Detect row clicked and switch that row's labels to populated textboxes for editing
  $('#tblBranchCoverage').on('click', 'tr', function () {
  
  // When the following is commented out, the inputs work
  //  If this block of code isn't commented, none of the rows inputs are editable
  // First set any other rows back to labels if they have textboxes
  $(this).parent().children('tr').each(function () {
      if ($(this).find('input').length &gt; 0) {
          // Row has textboxes
          var county = $(this).find('#txtEditCounty').val(),
              state = $(this).find('#txtEditState').val(),
              zips = $(this).find('#txtEditZips').val(),
              $td = $(this).find('td');
  
          // Clear the cells first
          $td.html('');
  
          // Put the populated labels back in
          $(this).find('.countyCovered').text(county);
          $(this).find('.stateCovered').text(state);
          $(this).find('.zipsCovered').text(zips);
      }
  });
  
  // Only run this if there aren't already textboxes in the current row
  if ($(this).find('input').length === 0) {
      // Get the values of the cells before the row is cleared
      var county = $(this).find('td.countyCovered').text(),
          state = $(this).find('td.stateCovered').text(),
          zips = $(this).find('td.zipsCovered').text();
  
      // Clear the text from the selected row
      $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');
  
      // Add textboxes to the cells populated with their respective values
      $(this).find('td.countyCovered').append('&lt;input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /&gt;&lt;br /&gt;' +
          '&lt;input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /&gt;&lt;br /&gt;' +
          '&lt;input type="submit" id="btnCancelCoverageEdits" value="Cancel" /&gt;');
      $(this).find('td.stateCovered').append('&lt;input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" /&gt;');
      $(this).find('td.zipsCovered').append('&lt;textarea id="txtEditZips" cols="100"&gt;' + zips + '&lt;/textarea&gt;');
  
      // Size the textarea to its contents
      $('#txtEditZips').flexible();
  }
  return false;
  });
  </code></pre>
  
  <p>As I said, the above functionality works as expected, with the exception that when one of the inputs in the row is clicked, the edit cursor immediately goes away (as if focus is immediately removed from the input). But when I comment out the first block of code (noted in the code), the inputs become editable as expected.</p>
  
  <p>I set up a <a href="http://jsfiddle.net/eventide/nHgXf/1/" rel="nofollow">jsFiddle</a> for this.</p>