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').click(function(e) {
    if ($(e.target).is(".remove_text") || $(e.target).closest(".remove_text").length > 0) return;

    //Otherwise, execute code
});

在这里小提琴：http://jsfiddle.net/5uxf6yy7/3/

Answer 2

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

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

以下是一个工作示例JS Fiddle

可编辑的表格（删除文本并在点击时添加文本字段）会激发太多次

2 个答案: