双击之后图片没了,怎么只修改文字
失去焦点后,文本框怎么也没有消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<title>无标题文档</title>
<style>
li
{
list-style:none;
background-color:#3CC;
color:#000;
width:200px;
height:40px;
padding:3px;
margin:5px;}
</style>
</head>
<body>
<ul>
<li><img src="文件树/images/ajax-loader.gif" />苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<script>
$(function(){
$("li").dblclick(function () {
//双击事件的执行代码
$text = $(this).text();
$(this).empty().append("<input value="+$text+" ></input>");
$("input").select();
});
$("input").blur(function(){
if($(this).val()!="")
$(this).parent().append($(this).val());
else
$(this).parent().append("新建");
$(this).remove();
});
});
</script>
</body>
</html>
我又来了, 你这里input的blur事件在文档加载完后就已经绑定了,新添加的input是没有绑定此事件的,需要动态绑定。改成这样:
要保留图片的话,文字用标签包起来吧。
<ul>
<li><img src='文件树/images/ajax-loader.gif'/><span>苹果</span></li>
<li><span>香蕉</span></li>
<li><span>葡萄</span></li>
</ul>
<script>
$(function(){
$("li").dblclick(function () {
var _li = $(this);
//双击事件的执行代码
$text = $(this).text();
_li.find('span').remove();
_li.append("<input value="+$text+" ></input>");
$("input").select().on('blur', function(){
var value = $(this).val();
_li.append('<span>' + ( value!='' ? value : '新建') + '</span>');
$(this).remove();
});
});
});
</script>
把外面的 $("input").blur(...)去掉。
在页面加载完毕时,js没有搜到input,就没有所谓的input的失焦方法,要么用原生的js 写监听事件,要么就
<li><span>苹果<span><input/></li>,一开始隐藏span span内容赋给input 然后就不多说了(^__^)