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

我有以下代码支持内联编辑

$('.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();
    });
}

---

.blur（）不会被触发。有人吗？

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

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

同时将td点击事件修改为停止播放：

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

$（'.edit_td'）。单击（函数（e）{
e、 停止传播（）；
resetEditedCells（）；
$（this.addClass（'active'）.html（“”）；
});

尝试类似的方法来替换现有的代码

$(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();

    }
});

$（文档）.on（'click'，函数（e）{
var edit_td=$（e.target）.closest（'.edit_td'）；
如果（编辑长度>0）{
resetEditedCells（）；
编辑添加类（“活动”）
.html（“”）；
}否则{
$（'.edit_td.active'）.removeClass（'active'）.empty（）；
}
});

---

这将使用

closest（）

来确定单击是来自TD内部还是外部。

尝试此js代码，其中edit\u TD类应用于每个TD，活动类位于活动TD上，模糊函数绑定到应用了“edit\u TD”和“active”类的TD

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

---

您知道您正在模糊文档本身吗？不是编辑字段…可能您正在查找

$（this）.removeClass（'active'）.empty（）.text（原始文本）尝试
$（'input'）。打开（'blur'
这不起作用。当我单击td时，会触发对文档的单击，td不会转换为输入字段。当你第一次单击td时，td应该转换为输入字段。当你在表外单击时，输入字段应该重置为td。最好直接在字段上绑定模糊事件。如果您绑定到文档，则该函数将在单击网页时被调用。这将使用不必要的处理能力。@user500468:您是否在td click事件中添加了StopRopagation？？？@MilindantWar:谢谢。但在删除输入字段之前，我如何捕获其值？编辑：没关系。我解决了它：）@MilindantWar：当我删除类时，如何恢复td及其值？当我在元素外部单击时，td内的内容将被删除。我通常就是这样做的。在代码中添加一些解释，以便有助于OP@CasperSky补充解释。
$('.edit_td.active').on('blur', function(e) {
       $('.active').remove();
    });