编辑可排序的可选li与jquery-ui

Question

我想允许在可选/可排序列表中编辑列表项目。

这里是一个列表例如： http://jsbin.com/aweyo5 学分rdworth

所以，我才好允许用户编辑项目？我知道如何更新/更改他们的文本，但我该怎么做才能让用户直接输入文本到列表项中？

Answer 1

这里是一个工作的答案：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script> 
<script type="text/javascript" src="jeditable.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     function makeEditable() 
     { 
      $('.editable').editable(function(value, settings) 
      { 
       /* Debug 

       console.log(this); 
       console.log(value); 
       console.log(settings); 
       */ 
       return(value); 
      }); 
     } 
     function makeDeletable() 
     { 
      $('a.delete').click(function(e) 
      { 
       e.preventDefault(); 
       $(this).parent().remove(); 
      }); 
     } 
     function addTopic(topicName) 
     { 
      $("ul.#topics").append('<li><span class="editable">' + topicName +'</span><a class="delete" href="">delete</a></li>'); 
      makeEditable(); 
      makeDeletable(); 
     } 
     makeEditable(); 
     makeDeletable(); 

     $("#topics").sortable(); 
     $("form").submit(function() { 
      addTopic($('input[name=topic]').val()); 
      return false; 
     }); 
     $('a#add').click(function(e) 
     { 
      e.preventDefault(); 
      addTopic($('input[name=topic]').val()); 
     }); 
    }); 
</script> 

<ul id="topics"> 
    <li><span class="editable">topic 1</span><a class="delete" href="">delete</a></li> 
    <li><span class="editable">topic 2</span><a class="delete" href="">delete</a></li> 
    <li><span class="editable">topic 3</span><a class="delete" href="">delete</a></li> 
</ul> 
<form> 
New topic: <input type="text" name="topic" /><br /> 
</form> 
<a id="add" href="">add</a> 

希望它能帮助:) 您可以在这里jeditable： http://www.appelsiini.net/projects/jeditable