javascript - Using on function on span tag -

i trying toggle between span , input text field using on function need in finding out doing wrong.

i have created fiddle here

ui

<div> <span >my value here!</span> </div> 

js

var focusinname = ''; var focusoutname = ''; $(function () {     $("document").on("click",".span", function () {         var input = $('<input />', {'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($('<span />').html($(this).val()));         $(this).remove();          focusoutname = $(this).val();         alert(focusoutname);     }); }); 

i recommend use simple contenteditable

 <span contenteditable="true">my value here!</span> 

---

you need use jquery 1.7+ $.fn.on() added in 1.7

html, add required class i.e. span element

<span class='span'>my value here!</span> 

code:

var focusinname = ''; var focusoutname = ''; $(function () {     $(document).on("click", ".span", function () {         focusinname = $(this).html();         var input = $('<input />', {             'type': 'text',                 'name': 'aname',                 'value': $(this).html(),                 'class': 'input' //add css class while creating element         });         input.focus();         $(this).parent().append(input);         $(this).remove(); //always remove @ end         alert(focusinname);     });      $(document).on('blur', ".input", function () {         focusoutname = $(this).val();         var span = $(             '<span />', {             'class': 'span', //add css class while creating element             'html': $(this).val()         });          $(this).parent().append(span);         $(this).remove();  //always remove @ end               alert(focusoutname);     }); }); 

the modified fiddle