Javascript 再次单击元素时，文本被清除

我在编写内联可编辑字段时遇到问题。一切似乎都很好，但当我再次单击输入字段时，现有文本消失了。我想不出是什么问题

var name;

$('span#editable').click(function(){
    name=$(this).text();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
});

var delayTimer = ''; // this is used when browsers like Chrome and Safari call the blur event twice
$(document).on('blur','#inlineEditableText', function() {
    //alert("blur");
    if (delayTimer == '') delayTimer = setTimeout(calledAfterDelay, 50);
});

function calledAfterDelay() {
    if($("#inlineEditableText").val() != ""){
        $.ajax({
            url: Config.baseUrl + 'some.php',
            type: 'PUT',
            data: JSON.stringify({
                "id" :<?= $selectedSpace->getId(); ?> ,
                "name" :$("#inlineEditableText").val()
            }),
            dataType : 'json',
            success: function(data) {
                Sapphire.Utilities.flashSuccess("Space renamed!");
            }
        });
    } else {
        Sapphire.Utilities.flashError('Please enter name'); 
    }   
    $('#editable').text(name);
    delayTimer = ''; // reset the timer so that the method can be run again
}

$(document).on('keyup','#inlineEditableText', function(e){  
    name = $(this).val();
    if(e.keyCode==13 || e.keyCode==27){
        $('#inlineEditableText').blur();
        name = $(this).val();
    }
});`

var名称；
$（'span#可编辑'）。单击（函数（）{
name=$（this.text（）；
$（this.html（“”）；
$('')
艾特先生({
“类型”：“文本”，
'name'：'fname'，
“id”：“inlineEditableText”，
“大小”：“30”，
“值”：名称
})
.appendTo（“#可编辑”）；
$（'#inlineEditableText'）.focus（）；
});
变量延迟计时器=“”；//当浏览器（如Chrome和Safari）调用模糊事件两次时，会使用此选项
$（document）.on（'blur'，'#inlineEditableText'，function（）{
//警报（“模糊”）；
如果（delayTimer=''）delayTimer=setTimeout（称为TerDelay，50）；
});
函数calledTerDelay（）{
if（$（“#inlineEditableText”）.val（）！=“”）{
$.ajax({
url:Config.baseUrl+'some.php'，
键入：“PUT”，
数据：JSON.stringify({
“id”：，
“名称”：$（“#inlineEditableText”）.val（）
}),
数据类型：“json”，
成功：功能（数据）{
Sapphire.Utilities.flashSuccess（“空间重命名！”）；
}
});
}否则{
Sapphire.Utilities.flashError（'请输入名称'）；
}   
$（'#可编辑'）。文本（名称）；
delayTimer=''；//重置计时器以便可以再次运行该方法
}
$（document）.on（'keyup'，'#inlineEditableText'，函数（e）{
name=$（this.val（）；
如果（e.keyCode==13 | | e.keyCode==27）{
$（'#inlineEditableText'）.blur（）；
name=$（this.val（）；
}
});`

这行代码有问题

  name=$(this).text();//this will return you text of span element not of input element 
    $(this).html('');//this clears your span element 

所以，如果您想保存输入元素的文本，您需要像这样获取输入元素的文本

name = $('span#editable>input[type="text"]').val();

然后，将此文本值指定给您最后正在创建的输入元素

所以最终的代码是

$('span#editable').click(function(){
    name = $('span#editable>input[type="text"]').val();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
});

$（'span#可编辑'）。单击（函数（）{
name=$（'span#editable>input[type=“text”]”）。val（）；
$（this.html（“”）；
$('')
艾特先生({
“类型”：“文本”，
'name'：'fname'，
“id”：“inlineEditableText”，
“大小”：“30”，
“值”：名称
})
.appendTo（“#可编辑”）；
$（'#inlineEditableText'）.focus（）；
});

使现代化

var名称；
$（“#可编辑”）。单击（函数（）{
name=$（this.text（）；
如果（$（'span#editable>input[type=text]）.length>0）
{
name=$（'span#editable>input[type=text]'）。val（）；
}
$（this.html（“”）；
$('')
艾特先生({
“类型”：“文本”，
'name'：'fname'，
“id”：“inlineEditableText”，
“大小”：“30”，
“值”：名称
})
.appendTo（“#可编辑”）；
$（'#inlineEditableText'）.focus（）；
});
var delayTimer=''；
$（document）.on（'blur'，'#inlineEditableText'，function（）{
如果（delayTimer=''）delayTimer=setTimeout（称为TerDelay，50）；
});
函数calledTerDelay（）{
警报（“呼叫延迟”）；
}
$（document）.on（'keyup'，'#inlineEditableText'，函数（e）{
name=$（this.val（）；
如果（e.keyCode==13 | | e.keyCode==27）{
$（'#inlineEditableText'）.blur（）；
name=$（this.val（）；
}
});

完整的工作和更新代码：

感谢各位专家的回答。 我已经解决了。 我刚刚检查了输入字段是否已经存在，然后不要附加它

var name;
$('span#editable').click(function(){
    if ($('span#editable').find('#inlineEditableText').length == 0)//this check does the job
    {
    name=$(this).text();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
}
});

var名称；
$（'span#可编辑'）。单击（函数（）{
if（$（'span#editable'）.find（'inlineEditableText'）.length==0）//此检查执行此任务
{
name=$（this.text（）；
$（this.html（“”）；
$('')
艾特先生({
“类型”：“文本”，
'name'：'fname'，
“id”：“inlineEditableText”，
“大小”：“30”，
“值”：名称
})
.appendTo（“#可编辑”）；
$（'#inlineEditableText'）.focus（）；
}
});

Euh，我想每次单击输入元素时都可能会再次覆盖它。在插入新的输入元素之前，您应该检查是否已经有一个具有有效文本的输入。@Shilly-您在这里是正确的…但即使他正在创建新元素，问题是没有为创建的元素指定正确的文本…如果span中没有文本，则在span上应用文本将不会返回任何内容。这可能是空白的原因，假设他每次都想重新创建输入元素，那么您的解决方案将非常有效。我现在只是想知道为什么输入不是初始html的一部分。是的，你是对的。我需要它，当再次单击时不会清除文本。@MianHaseeb-检查更新，如果它对你有效，不要忘记升级/接受。请接受答案，因为它有助于解决问题…不要忘记它

var name;
$('span#editable').click(function(){
    if ($('span#editable').find('#inlineEditableText').length == 0)//this check does the job
    {
    name=$(this).text();
    $(this).html('');
    $('<input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'inlineEditableText',
            'size': '30',
            'value': name
        })
        .appendTo('#editable');
    $('#inlineEditableText').focus();
}
});