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时，它只会触发一次模糊事件

Answer 2

Use unbind() function to cancel the event and then bind the same event using on() function.

Below code solves your problem.

var $td = $('td')
$td.unbind('click').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();
    });
});

在模糊触发多次

2 个答案: