title: Using on function on span tag
body: <p>I am trying to toggle between span and input text field using on function but I need some help in finding out what I am doing wrong. </p>
  
  <p>I have created a fiddle for it <a href="http://jsfiddle.net/RUwtt/392/" rel="nofollow">here</a></p>
  
  <p><strong>UI</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;span &gt;My value here!&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var focusInName = '';
  var focusOutName = '';
  $(function () {
      $("document").on("click",".span", function () {
          var input = $('&lt;input /&gt;', {'type': 'text', 'name': 'aname', 'value': $(this).html()});
          $(this).parent().append(input);
          $(this).remove();
          input.focus();
          focusInName = $(this).html();
          alert(focusInName);
      });
  
      $('document').on('blur',".input", function () {
          $(this).parent().append($('&lt;span /&gt;').html($(this).val()));
          $(this).remove();
           focusOutName = $(this).val();
          alert(focusOutName);
      });
  });
  </code></pre>