分区或表内的jquery focusout函数

时间:2016-07-01 01:31:48

标签: jquery

我有一个函数可以显示里面有一个表格的分区。在thead区域将有一个输入类型和一个标签。首先显示标签,如果单击标签,它将隐藏,输入类型将显示。如果你点击分区外,它工作正常。但是如果你点击分区或表格内部它没有任何作用。这是我的功能。

$('.add-header').on('click',function(){
    var header = $(this).parent().find('#header-name').val();
    $('tbody.content').prepend('<div class="groupborder" style="border-color:#333333"><tr> \
        <td> \
            <table class="tables_details" style="width:100%;"> \
                <th id="groups" data-id="'+headcount+'" style="background-color: #333333; width: 100%;" > \
                    <label style="display:inline-block;float:left; margin-left:900px; width:60px; font-weight: bold; color:#FFFFFF;">\
                        Sub-total:\
                    </label> \
                    <label class="head" style="margin-bottom:-4px;width:300px;height:20px;border:1px solid red;display: block; margin-left: -930px; float: left; font-size: 11px;; color:#FFFFFF;">\
                        HEADER '+headcount+'\
                    </label> \
                    <input type="text" name="header_name[]" class="edit-input" style="width:300px;height:20px; display: none; margin-left: -930px; float: left; padding-left:5px;" value="HEADER '+headcount+'"/> \
                    <input class="header_id" name="header_id[]" type="hidden" value="'+headcount+'"> \
                    <a href="" class="rm-header fa fa-times-circle fa-lg" style="float:right; margin-right:5px; margin-top:5px"></a> \
                    <label style="display:inline-block; float:right; margin-right:30px; font-weight: bold; color:#FFFFFF;" class="total" id="total_'+headcount+'" data-sub_id="'+headcount+'">0.00</label></th> \
                    <input name="header_subtotal[]" class="stotal" id="stotal_'+headcount+'" type="hidden" value="0.00"> </th> \
                <tbody class="subcontent tbody"></tbody> \
            </table>\
      </td> </tr></div>');
    // header tweak 
    var dad = $(this).parent().parent();
    edit(dad);

    $('.head').on('click', function(){
        var dad = $(this).parent().parent();
        edit(dad);
    })
    sort();
    headcount+=1;
    $('.rm-header').on('click',function(){
        a = $(this);
        headrm(a);
        return false;
    })
})

function edit(dad){
    dad.find('.head:first').hide();
    dad.find('.edit-input:first').show().focus().select();

    $('.edit-input').focusout(function(){
        var dad = $(this).parent();
        var x = $(this).parent().find('.edit-input').val();
        $(this).hide();
        dad.find('.head').text(x).show();           
    });
}

0 个答案:

没有答案