无法弄清楚为什么 textarea 不能保持可编辑状态

Question

以下 jQuery 代码按预期工作（代码中的每个 cmets），基本上它的作用是

1. 检测点击了哪一行，
2. 遍历表的行并确定该行中是否有输入，
3. 如果是，则抓取并存储该行中文本框和文本区域的值
4. 从该行的 tds 中删除元素
5. 并用存储值的标签替换输入
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

演示：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;
});

基本上是因为你绑定到了点击事件，它不断地让所有的 javascript 发生，并导致 DOM 和选择出现问题