javascript - input框相关问题
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-31 10:42:01
[HTML讨论组]

文件夹重命名之后,input框失去焦点,input消失,获取input框的value值,使他的父标签的text值为输入的value,怎样实现啊?

html代码

<p class="subject_folder_box hidden">
    <ul class="subject_folder_ul">
        <li class="subject_li_1">
            <a><span class="folder_name">默认文件夹</span>(<span class="floder_num">1</span>)</a>
        </li>
    </ul>
    <p class="subject_edit_li">
        <a title="添加" class="add_subject js_add" id=""></a>
        <a title="编辑" class="edit_subject js_edit" id=""></a>
    </p>
</p>

js代码

//编辑文件夹
$(".js_edit").click(function(){
    $(".subject_folder_ul li a").append("<a title='重命名' class='edit_subject js_edit1' id=''></a>");
});
//重命名文件夹
$(".js_edit1").live("click",function(){
    $(this).hide();
    var txt=$(this).siblings(".folder_name").text();
    $(this).parents("a").find(".folder_name").empty();
    $(this).parents("a").find(".folder_name").append("<input type='text' name='' maxlength='10' id='' value='"+txt+"'/>");
});
//添加文件夹
$(".js_add").click(function(){
    $(".subject_folder_ul").append("<li><input type='text' name='' maxlength='10' id='' placeholder='请输入子类名称'/></li>");
});

//input输入框失去焦点
$(".subject_li_1 input").on("blur",function(){
    var value=$(this).val();
    $(this).remove();
    $(this).parents(".folder_name").text(value);
});
                    
曾经蜡笔没有小新
曾经蜡笔没有小新

全部回复(1)
PHPz
//input输入框失去焦点
$(".subject_li_1 input").on("blur",function(){
    var value=$(this).val();
    $(this).remove();
    $(this).parents(".folder_name").text(value);
});

这一块代码也应该用 事件委托,节点是你后创建的。

//重命名文件夹
$(".js_edit1").live("click",function(){
    $(this).hide();
    var txt=$(this).siblings(".folder_name").text();
    $(this).parents("a").find(".folder_name").empty();
    $(this).parents("a").find(".folder_name").append("<input type='text' name='' maxlength='10' id='' value='"+txt+"'/>");
});
这个dom应该remove吧,不然以后会 越来越多
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号