想不通爲什麼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的問題和選擇