Jquery实现点击文字后变成文本框，修改发送后台保存

本文实现以下几个功能：

1.点击文字变为文本框 ，并选中文字
2.对文本框内容进行修改
3.点击文本框以外的地方文本框再次变为修改后的文字，如果是删除文字，显示默认提示文字
4. 同步更新SQL数据库内容

首先是HTML模板部分：

<{if !empty($img_list)}>
<{foreach $img_list as $kk=>$vv}>
<div class="item-box radius3">
<a href="<{$vv['image']}>" target="_blank">
<div class="item-image">
<img src="<{$vv['image']}>?imageView/0/w/260/q/85" />
</div>
</a>
<div class="item-desc" >
<span class="item-desc-span"><{$vv['name']}></span>
<input type="hidden" name="image_id" value="<{$vv['id']}>" />
</div>
<div class="item-op">

<{date('Y-m-d h:i:s',$vv['add_time'])}>
<div class="opAbs">
<{if $vv['status']==0}>
<span class="op" onclick="set_cover(<{$vv['id']}>)" >设为封面</span> 
<{/if}>
<span class="op" onclick="image_del(<{$vv['id']}>)" >删除</span>
 

</div>
</div>
</div>
<{/foreach}>
<{/if}>

再来是处理脚本：

<script type="text/javascript">
$(function(){
$(".item-desc-span").click(function(){
var span_str = $(this);
var ex_desc_str = span_str.text();
var input_str = $("<input type='text' class='editTxt' name='desc' value='"+ex_desc_str+"' />");
span_str.html(input_str);
input_str.click(function() { return false; });
input_str.trigger("focus");
input_str.select();
//input失去焦点时候
input_str.blur(function(){
var to_desc = $(this).val();
var id = $(this).parent().next('input').val();
$.ajax({
type: 'POST',
url: '/club_image/set_desc',
dataType: 'json',
data:{'id': id,'desc':to_desc},
success: function(data){
if(data.success==1){
if(to_desc){
span_str.html(to_desc);
}else{
span_str.html('暂无描述');
}
}else{
span_str.html(ex_desc_str);
alert("后台错误："+data.msg);
}
},
error: function(data){
alert("AJAX错误");
ret = false;
}
});
});
//按下回车键时候
input_str.keydown(function(event){
if(event.keyCode == 13 ) {
var to_desc = $(this).val();
var id = $(this).parent().next('input').val();
$.ajax({
type: 'POST',
url: '/club_image/set_desc',
dataType: 'json',
data:{'id': id,'desc':to_desc},
success: function(data){
if(data.success==1){
if(to_desc){
span_str.html(to_desc);
}else{
span_str.html('暂无描述');
}
}else{
span_str.html(ex_desc_str);
alert("后台错误："+data.msg);
}
},
error: function(data){
alert("AJAX错误");
ret = false;
}
});
}
});

});
});
</script>