javascript - 可编辑表格(单击时删除文本并添加文本字段)触发次数过多

Question

所以我有一张我想要编辑的表格。为此，我有一个简单的事件监听器，它从 td 元素中删除文本，并附加一个输入字段，该文本作为值。一旦文本字段失去焦点，该文本字段的值就会附加到 td 中。

问题是当用户尝试突出显示并删除文本(单击)时会触发它。

我更改了选择器以排除特定输入字段的类，但没有效果。

Javascript:

$(function() {
    $('.text_field:not(.remove_text)').click(function() {

        var text   = $(this).text().trim(),
            length = text.length;

         $(this).empty()
                .append("<input type='text' class='remove_text' size='"+length+"' value='"+text+"' />")
                .find('.remove_text')
                .focusout(function() {
                    $(this).closest('td').empty().append($(this).val());
                })
                .focus();  

    });
});

这是 fiddle 来表达我的意思。

选择器有问题吗？

Answer 1

一个简单的解决方案是添加一些逻辑，以防止表单元格已包含输入元素时清空。

$('.text_field:not(.remove_text)').click(function() {
    if( $(this).find('input').length > 0 ) {                        
        return;
    }
    // your existing code
}

这是一个工作示例 JS Fiddle