Question

我在内容可编辑div中有一个简单的表格，如下所示：

<div contenteditable="true">
    <table class="rwd-table" width="100%">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

当您单击一个单元格时，我正在使用jQuery向该单元格添加ID。该ID已应用CSS以突出显示它。

$(document).on('click', 'td, th', function (event) {
    // remove previous highlighted cell
    $('#selectedCell').removeAttr('id');
    // highlight new cell
    $(this).attr('id', 'selectedCell');
});

当突出显示的单元格失去焦点时，应删除该ID。这是我的问题。

// DOES NOT WORK  :(   //
$(document).on('blur', '#selectedCell', function (event) {
    $('#selectedCell').removeAttr('id');
});

我假设它是因为表格单元格通常没有焦点/模糊事件。

有没有办法在特定范围内检测表格单元格上的模糊？

以下是一个实例：http://jsfiddle.net/5c7br6zc/

Answer 1

是的，模糊事件的问题。尝试在document上绑定点击事件而不是依赖它，并防止它冒泡，以防万一在TD上发生点击：

$(document).on('click', 'td, th', function (event) {
    $('#selectedCell').removeAttr('id');
    $(this).attr('id', 'selectedCell');
    event.stopPropagation();
});

$(document).on('click', function (event) {
    $('#selectedCell').removeAttr('id');
});

演示： http://jsfiddle.net/5c7br6zc/1/

如何在可编辑的内容中模糊表格单元格

1 个答案: