javascript - On blur 触发多次

Question

我试图使用 jQuery 创建一个可编辑的表格。

作为它的一部分，我显示了一个 td 的文本区域 onClick 并且在该文本区域的模糊处我隐藏了它。

问题是当我继续点击其他 td 时，文本区域模糊会以指数方式触发。文本区域显示正确唯一的问题是异常触发计数onBlur。

这一定是我设计中的一个流程。请引导我走上正确的道路。

代码

var $td = $('td')
$td.on('click', function () {
    $(this).addClass('selected');
    var $self = $(this);
    var offset = $(this).offset();
    var height = $(this).outerHeight();
    var width = $(this).outerWidth();
    var value = $(this).text();
    $('.input').show().css({
        top: offset.top,
        left: offset.left,
        height: height,
        width: width
    }).val(value).focus().on('blur', function () {
        console.log('triggerd')
        $self.removeClass('selected');
        $(this).hide();
    });
});

JSFiddle

Answer 1

问题是因为您每次单击任何 TD 时都会添加 .on('blur') 事件。解决方案是改为将其更改为 .one('blur')。这样事件处理程序将只触发一次然后被删除。这样每次你点击一个TD，它只会触发一次模糊事件