javascript - On blur triggered multiple times -

i trying create editable table using jquery.

as part of showing text-area onclick of td , on blur of text-area hiding that.

the issue text-area blur triggered exponentially go on clicking other td. text-area showing correctly issue abnormal trigger count onblur.

it must flow in design. please guide me on 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

the problem because you're adding .on('blur') event every time click on td. solution change .one('blur') instead. way event handler trigger once , removed. way each time click td, triggers blur event once