title: Reset input-field when click outside the element
body: <p>I have the following code that enables inline editing</p>
  
  <pre><code>$('.edit_td').click(function() {
      resetEditedCells(); 
      $(this).addClass('active').html('&lt;input type="text" value="' + $(this).html() + '"&gt;');
  });
  
  function resetEditedCells() {
          $('.edit_td.active').html(function() {
          return $(this).find('input').val();
      });
  }
  </code></pre>
  
  <p>This works fine when switching from td to td. But when I click anywhere else, outside the table, I want the input fields, to transform back to the regular tds.</p>
  
  <p>Ive tried like this:</p>
  
  <pre><code>$(document).on('blur', function(e) {
      if($('.edit_td').hasClass('active')) {
          $('.active').remove();
      } else {
          alert("false");
      }
  
  });
  </code></pre>
  
  <p>The .blur() is not triggered. Anyone?</p>