javascript - input框相关问题

问题描述

问 题

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

html代码

<div 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>
    <div class="subject_edit_li">
        <a title="添加" class="add_subject js_add" id=""></a>
        <a title="编辑" class="edit_subject js_edit" id=""></a>
    </div>
</div>

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);
});
                    

解决方案

//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吧，不然以后会 越来越多

这篇关于javascript - input框相关问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！