Question

我有以下代码启用内联编辑

$('.edit_td').click(function() {
    resetEditedCells(); 
    $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});

function resetEditedCells() {
        $('.edit_td.active').html(function() {
        return $(this).find('input').val();
    });
}

从td切换到td时，此功能正常。但当我点击其他任何地方，在桌子外面，我想要输入字段，转换回常规tds。

我试过这样：

$(document).on('blur', function(e) {
    if($('.edit_td').hasClass('active')) {
        $('.active').remove();
    } else {
        alert("false");
    }

});

未触发.blur（）。任何人吗？

Answer 1

尝试这样的方法来替换你拥有的代码

$(document).on('click', function(e) {
    var edit_td = $(e.target).closest('.edit_td');

    if ( edit_td.length > 0 ) {

        resetEditedCells(); 
        edit_td.addClass('active')
               .html('<input type="text" value="' + edit_td.html() + '">');

    }else{

        $('.edit_td.active').removeClass('active').empty();

    }
});

这使用closest()来确定点击是来自TD内部还是外部。

Answer 2

您需要使用点击事件而不是模糊：

$(document).click(function() {
 if($('.edit_td').hasClass('active')) {
     $('.active').remove();
 } else {
     alert("false");
}});

还将td点击事件修改为stopPropagation：

$('.edit_td').click(function(e) {
 e.stopPropagation();
 resetEditedCells(); 
 $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});

Answer 3

尝试这个js代码，其中edit_td类应用于每个td，活动类在活动td上，并且blur函数绑定到应用了“edit_td”和“active”类的td。

$('.edit_td.active').on('blur', function(e) {
       $('.active').remove();
    });

单击元素外部时重置输入字段

3 个答案: