title: On blur triggered multiple times
body: <p>I was trying to create an editable table using jQuery.</p>
  
  <p>As a part of it I was showing a text-area <code>onClick</code> of a td and on blur of that text-area I was hiding that.</p>
  
  <p>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 <code>onBlur</code>.</p>
  
  <p>It must be a flow in my design. Please guide me on the right path.</p>
  
  <p>Code</p>
  
  <pre><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();
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Pax5g/" rel="nofollow">JSFiddle</a></p>