jquery - 无法弄清楚为什么文本区域不能保持可编辑状态

Question

以下 jQuery 代码按预期工作(根据代码中的注释)，本质上它的作用是

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(); 将帮助您做到这一点。