Question

从这里开始是所有相关代码的小提琴：http://jsfiddle.net/baruck/43787/ 我正在构建一个webapp，在某些时候用户需要注册一些项目。这是一个很大的形式，表格的这一部分在表格内。每个输入标签都在td内，后跟一个span。当用户单击以编辑某一行时，脚本会隐藏跨度（包含输入的值）并显示输入。当用户单击另一行（或创建一个新行）时，脚本会选择输入的值，添加/更改范围文本并隐藏输入并显示范围。

当用户点击某一行时，它首先选择向其添加“编辑”类的行，然后第二次点击将焦点放在输入上。

当我在桌子内点击时，一切顺利;问题是当我在活动行的最后一个输入之后单击包含输入或命中选项卡的表外部时。重点放在其他地方......

当这两个动作中的一个发生时，我想'停用行'，意味着从该行的输入中选取值，在跨度中添加/更改它们，隐藏输入并显示跨度。

总结：当需要使用“editable”类或在行的最后一个输入上“tab off”时单击表格外部时，需要触发此功能...

function deactivateRows() {
    //Deactivate editing on the rows
    $('table.editable tr.editing').removeClass('editing');
    $('table.editable').find('td').not('.delete').each(function () {
        $(this).find('input').each(function () {
            var inputContent = $(this).val();
            $(this).prop('disabled', true).addClass('hide').attr('value', inputContent);
            $(this).parent().find('span').html(inputContent).removeClass('hide');
        });
    });
}

Answer 1

我认为诀窍是从点击的元素或模糊事件的相关元素遍历DOM，看看你是否点击了table.editable。像这样：

var isInsideEditable = function (el) {
    return !!el && $(el).closest('table.editable').length > 0;
};

$('select, input, textarea', '.editable').on('blur', function (e) {
    if (!isInsideEditable(e.relatedTarget))
        deactivateRows();
});

$(window).on('click', function (e) {
    if (!isInsideEditable(e.target))
        deactivateRows();
    return false;
});

在表格内单击表单的操作

1 个答案: