CRUD（直接编辑和更新数据）

Question

我已经做了创建功能（演示here ），但现在遇到了一些麻烦实施编辑一部分。编辑代码单独工作完美here，只是谓我不知道如何将它们结合起来共同工作..

当前代码： HTML

<ul style="list-style:none;margin:0;padding:0"> 
        <li style="list-style:none" id="active" ><a href="#" >Personal</a></li> 
        <li><a href="#" id="add">Add</a></li> 
       </ul> 

        <input type="text" name="task-group" style="display:none"> 

jQuery的

 $(document).ready(function(){ 
    $("input[name=task-group]").hide(); 

    var addBtn = $("#add"); 
    var inputBar = $("input[name=task-group]"); 

    $(addBtn).click(function(){ 
     $(this).hide(); 
     $(inputBar).show().focus(); 
     $(inputBar).val(''); 
    }); 


$(inputBar).blur(function(){ 
     if($(inputBar).val() !== ""){ 
     var text = $(this).val(); 
     $(addBtn).show(); 
     $(inputBar).hide(); 

     $('#active').append("<li id='active'><a href='#'>" + text + "</a></li>"); 


     } // if close 
     else { 
      $(addBtn).show(); 
      $(inputBar).hide(); 
     } 
    }); 

    $(inputBar).keydown(function (e){ 
    if(e.keyCode == 13){ 
     $(this).blur(); 
    } 
    }); 


    }); 

Answer 1

看看jsfiddle

更改您的HTML作为：

<ul class="container" style="list-style:none;margin:0;padding:0"> 
     <li style="list-style:none" class="item" id="active" ><a href="#" >Personal</a></li> 

</ul> 
<br/> 
<a href="#" id="add">Add</a> 
<input type="text" name="task-group" style="display:none"/> 

更改你的JavaScript为：

$(document).ready(function() { 
    $("input[name=task-group]").hide(); 

    var addBtn = $("#add"); 
    var inputBar = $("input[name=task-group]"); 
    var beforeItems = $('li.item'); 

    $(addBtn).click(function() { 
     $(this).hide(); 
     $(inputBar).show().focus(); 
     $(inputBar).val(''); 
    }); 


    $(inputBar).blur(function() { 
     if ($(inputBar).val() !== "") { 
      var text = $(this).val(); 
      $(addBtn).show(); 
      $(inputBar).hide(); 

      $('ul.container').append("<li class='item' ><a href='#'>" + text + "</a></li>"); 
      items = $('li.item'); 
      items.on('click', itemClick); 
     } // if close 
     else { 
      $(addBtn).show(); 
      $(inputBar).hide(); 
     } 
    }); 

    $(inputBar).keydown(function (e) { 
     if (e.keyCode == 13) { 
      $(this).blur(); 
     } 
    }); 

    var itemClick = function (e) { 
     var $this = $(e.target).closest('li.item'); 
     var txt = $this.find('a').text(); 

     var activeInput = $("<input type='text'/>").val(txt); 
     $this.html(''); 

     activeInput.appendTo($this).focus(); 
     activeInput.on('blur', activeInputBlur); 
    }; 

    var activeInputBlur = function (e) { 
     var $this = $(e.target); 
     var v = $this.val(); 
     if (v.trim() == "") { 
      alert('Field cannot be empty'); 
      $this.focus(); 
     } else { 
      var $a = $("<a href='#'>" + v + "</a>"); 
      $this.parent().append($a); 
      $this.remove(); 
     } 
    }; 

    beforeItems.on('click', itemClick); 
});