On blur triggered multiple times

Question

I was trying to create an editable table using jQuery.

As a part of it I was showing a text-area onClick of a td and on blur of that text-area I was hiding that.

The issue is that the text-area blur is triggered exponentially as I go on clicking other td. The text-area is showing correctly only issue is the abnormal trigger count onBlur.

It must be a flow in my design. Please guide me on the right path.

Code

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

The problem is because you're adding that .on('blur') event every time you click on any TD. The solution is to change it to .one('blur') instead. This way the event handler will trigger only once and then be removed. That way each time you click a TD, it only triggers the blur event once