想不通为什么textarea的不会留编辑

Question

下面的jQuery代码按预期工作（每评论中的代码），基本上它的作用是

1. 检测表行单击其中，
2. 遍历表格中的行，并且确定是否该行中有一个输入，
3. 如果这样做，抓斗，并存储该行
4. 在文本框和文本区域的值中删除从TDS该行
中的元素
5. a ND与存储的值标签替换输入
6. 然后，在点击行，标签的值存储和
7. 标签与填充了存储的值

这里的输入替换相关的jQuery：

// 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 > 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('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' + 
     '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' + 
     '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />'); 
    $(this).find('td.stateCovered').append('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />'); 
    $(this).find('td.zipsCovered').append('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>'); 

    // Size the textarea to its contents 
    $('#txtEditZips').flexible(); 
} 
return false; 
}); 

正如我所说，上述功能正常工作，不同之处在于，当被点击的行中的一个输入，编辑光标立即消失（仿佛焦点立即删除输入）。但是，当我注释掉第一个代码块（在代码中注明）时，输入会按预期编辑。

我为此设置了一个jsFiddle。

Answer 1

一个简单的解决方案是将下面的代码添加到代码中。 DEMO HERE

$('#tblBranchCoverage').on('click', ':input', function (event) { 
    event.stopPropagation(); 
}); 

由于javascript中的事件冒泡发生此问题。 当你点击输入框时，在点击输入后，事件将被传递给父元素。 所以我们只需要停止所有输入控件上的事件冒泡。 event.stopPropagation();将帮助你做到这一点。

Answer 2

DEMO：http://jsfiddle.net/nHgXf/2/

改变的Javascript：

var editting = false; 

// Detect row clicked and switch that row's labels to populated textboxes for editing 
$('#tblBranchCoverage').on('click', 'tr', function() { 
    if(!editting) 
    { 
     editting = true; 
    // 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 > 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').html('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' + 
      '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' + 
      '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />'); 
     $(this).find('td.stateCovered').html('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />'); 
     $(this).find('td.zipsCovered').html('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>'); 

     // Size the textarea to its contents 
     $('#txtEditZips').flexible(); 
    } 
    } 
    editting =false; 
    return false; 
}); 

基本上是因为你绑定到click事件就不断是使所有的JavaScript发生，并导致与DOM的问题和选择