html - jQuery edit content of li element -

i'm making simple todo list jquery , stuck problem on how edit content of li element double clicking. wrote function, doesn't work.

here code: http://jsfiddle.net/strangeviking/1vwho2ru/3/:

function addlistitem() {    var text = $('#new-text').val();    $("#todolist").append('<li><input type="checkbox" class="edit" />' + text + ' <button class="delete">delete</button></li>');    $("#new-text").val('');  };    function deleteitem() {    $(this).parent().remove();  }    function finishitem() {    if ($(this).parent().css('textdecoration') == 'line-through') {      $(this).parent().css('textdecoration', 'none')    } else {        $(this).parent().css('textdecoration', 'line-through');    }  }    function edititem(e) {    var $input = $(e.target).closest('li').addclass('editing').find('.edit');    $input.val($input.val()).focus();  }    $(function() {    $('#new-text').keyup(function(e) {      if (e.keycode === 13) {        addlistitem();      }    });    $(document).on('click', '.delete', deleteitem);    $(document).on('click', '.edit', finishitem);    $(document).on('dblclick', '.edit', edititem);    $("#select_all").click(function() {      $('input:checkbox').not(this).prop('checked', this.checked);      if ($('li').css('textdecoration') == 'line-through') {        $('li').css('textdecoration', 'none')      } else {          $('li').css('textdecoration', 'line-through');      }    });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1>list</h1>    <input type="text" id="new-text" />  <ul id="todolist"></ul>  <br>  <input type="checkbox" id="select_all" />select all

rather using doubleclick edit, can use html5's contenteditable attribute.

the change you'd make add span around text on line:

$("#todolist").append('<li><input type="checkbox" class="edit" /> <span contenteditable="true">' + text + ' </span><button class="delete">delete</button></li>'); 

function addlistitem() {    var text = $('#new-text').val();    $("#todolist").append('<li><input type="checkbox" class="edit" /><span contenteditable="true">' + text + ' </span><button class="delete">delete</button></li>');    $("#new-text").val('');  };    function deleteitem() {    $(this).parent().remove();  }    function finishitem() {    if ($(this).parent().css('textdecoration') == 'line-through') {      $(this).parent().css('textdecoration', 'none')    } else {        $(this).parent().css('textdecoration', 'line-through');    }  }    function edititem(e) {    var $input = $(e.target).closest('li').addclass('editing').find('.edit');    $input.val($input.val()).focus();  }    $(function() {    $('#new-text').keyup(function(e) {      if (e.keycode === 13) {        addlistitem();      }    });    $(document).on('click', '.delete', deleteitem);    $(document).on('click', '.edit', finishitem);    $(document).on('dblclick', '.edit', edititem);    $("#select_all").click(function() {      $('input:checkbox').not(this).prop('checked', this.checked);      if ($('li').css('textdecoration') == 'line-through') {        $('li').css('textdecoration', 'none')      } else {          $('li').css('textdecoration', 'line-through');      }    });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1>list</h1>  <input type="text" id="new-text" />  <ul id="todolist">  </ul>  <br>  <input type="checkbox" id="select_all" />select all

_fiddle