首页 > 1、如何只改变li里面的文字,不影响到图片 2、input失去焦点事件失败

1、如何只改变li里面的文字,不影响到图片 2、input失去焦点事件失败


双击之后图片没了,怎么只修改文字


失去焦点后,文本框怎么也没有消失

<!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 然后就不多说了(^__^)

【热门文章】
【热门文章】