編輯動態文本HTML

Question

我在HTML項目代表食物菜單

<ul> 
<li id = "soratable1" >big burger<p>decription of big burger</p><small>$6.50</small></li> 
<li id = "soratable2" >cheese burger<p>decription of cheese burger</p><small>$6.50</small></li> 
<li id = "soratable3" >fish burger<p>decription of fish burger</p><small>$6.50</small></li> 
<li id = "soratable4" >bacon burger<p>decription of bacon burger</p><small>$6.50</small></li> 

使用jQuery我提出這樣的排序列表的列表。用戶可以添加和刪除這個列表中的項目。編輯我只想讓用戶點擊文本，編輯它並在數據庫中自動更新。我正在考慮在文本框中放入每件物品，並用css隱藏邊界，然後使用一些onfocus onblur魔法，但這看起來有點過時。

有什麼建議嗎？

Answer 1

一種替代方法是使用jEditable插件。

檢查出來@http://www.appelsiini.net/projects/jeditable

Answer 2

你可以有一些那種交換包含在裏包含的文本輸入框中的文本的「編輯」圖標。然後，聽取輸入的onblur事件。 這是一個看起來像什麼的例子。 HTML：

<ul> 
    <li><a id="LINK" href="#">edit</a><span id="TEXT">Text goes here</span><input id="INPUT" type="text" style="display:none" /></li> 
</ul> 

的Javascript：

$(document).ready(function() 
{ 
    $("#LINK").click(function(){ 
    $("INPUT").val($("#TEXT").text()); 
    $("INPUT").show(); 
    $("#TEXT").hide(); 
    }); 

    $("#INPUT").blur(function(){ 
    $("#TEXT").html($("INPUT").val()); 
    $("#INPUT").hide(); 
    $("#TEXT").show(); 
    }); 
});