title: jQuery span to input and vice-versa
body: <p>I have a problem. Look at the code bellow:</p>
  
  <pre><code>   $(function () {
      $('span').live('click', function () {
          var input = $('&lt;input /&gt;', {
              'type': 'text',
                  'name': 'aname',
                  'value': $(this).html()
          });
          $(this).parent().append(input);
          $(this).remove();
          input.focus();
      });
  
      $('input').live('blur', function () {
          $(this).parent().append($('&lt;span /&gt;').html($(this).val()));
          $(this).remove();
      });
      });
  </code></pre>
  
  <p>and html now:</p>
  
  <pre><code>&lt;span&gt;Click aici&lt;/span&gt;
  </code></pre>
  
  <p>So, this it works, obviously, until jquery 1.8.3, inclusively. After 1.8.3 .live() is deprecated an we need to use .on(). So the code become:</p>
  
  <pre><code>$(function () {
      $('span').on('click', function () {
          var input = $('&lt;input /&gt;', {
              'type': 'text',
                  'name': 'aname',
                  'value': $(this).html()
          });
          $(this).parent().append(input);
          $(this).remove();
          input.focus();
      });
  
      $('input').on('blur', function () {
          $(this).parent().append($('&lt;span /&gt;').html($(this).val()));
          $(this).remove();
      });
      });
  </code></pre>
  
  <p>or just:</p>
  
  <pre><code>$(function () {
      $('span').click(function () {
          var input = $('&lt;input /&gt;', {
              'type': 'text',
                  'name': 'aname',
                  'value': $(this).html()
          });
          $(this).parent().append(input);
          $(this).remove();
          input.focus();
      });
  
      $('input').blur(function () {
          $(this).parent().append($('&lt;span /&gt;').html($(this).val()));
          $(this).remove();
      });
      });
  </code></pre>
  
  <p>But this is working just first time.</p>
  
  <p>See demo here: <a href="http://jsfiddle.net/hW3vk/" rel="nofollow">http://jsfiddle.net/hW3vk/</a>
  So, any idea how to do that will be appreciated.</p>
  
  <p>Thank you in advance.</p>