jquery ajax双击div可直接修改div中的内容

最近在做后台功能开发的时候，用到对排序字段的修改，感觉只为了修改一个排序值，而要重新进入编辑页比较麻烦，于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果：
html代码：

<div title="【双击可直接修改】" class="changeSort" id="{$id}">{$sort}</div>

JS代码：

<script type="text/javascript">//双击修改排序 $（".changeSort"）.dblclick（function（）{var url = "{:U（"setSort"）}";var td = $（this）;var id = td.attr（"id"）;var text = td.text（）;var txt = $（"<input type="text" class="input-small" >"）.val（text）;txt.blur（function（）{ // 失去焦点，保存值。于服务器交互自己再写,最好ajax var newText = $（this）.val（）; $.ajax（{ url:url, type:"POST", data:{"tid":id,"sort":newText}, dataType:"json", success:function（res）{if（res.flag==1）{layer.msg（res.msg）;// 移除文本框,显示新值$（this）.remove（）;td.text（newText）;}else if（res.flag==3）{ layer.msg（res.msg）; txt.val（newText）;} }}）;}）;td.text（""）;td.append（txt）; }）;</script>

PHP代码：

<?PHP/*** ajax 设置排序值*/ public function setSort（）{if（IS_POST）{ $tid = I（"post.tid"）; $sort = I（"post.sort"）; if（！is_numeric（$sort））{$arr = array（ "flag"=>3, "msg"=>"请输入数字", "link"=>"", "content"=>""）;$this->ajaxReturn（$arr）; } $data = array（"id"=>$tid,"sort"=>$sort ）; $this->mod_sort = M（"Sort"）; $res = $this->mod_sort->save（$data）; if（$res）{$arr = array（ "flag"=>1, "msg"=>"排序值设置成功", "link"=>"", "content"=>""）; }else{$arr = array（ "flag"=>2, "msg"=>"排序值设置失败", "link"=>"", "content"=>""）; }}else{ $arr = array（"flag"=>0,"msg"=>"请求非法！","link"=>"","content"=>"" ）;}$this->ajaxReturn（$arr）; }?>

效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助。