javascript - 如何单击并编辑内联元素

Question

我不确定它叫什么，但我希望能够点击例如一个包含数字的div，然后它会变成一个输入文本字段，值为我点击的数字。

然后我想编辑数字，然后单击关闭(onblur 事件)，它将变回 div，从显示新编辑的文本字段数字。该号码也将通过 ajax 更新到数据库中。

这个函数叫什么？
最好的编码方式是什么？

Answer 1

您可以执行以下操作:

有一个点击事件并动态创建一个文本框，它将 div 中的文本作为值。

甚至绑定(bind)到该文本框并进行 AJAX 调用并在其成功更改 div 文本时也有模糊

假设您的 HTML 是这样的:

<div id="fullname">Amazing Spider man</div>

你的 JS 代码将是这样的:

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

$(document).on('blur','#txt_fullname', function(){
    var name = $(this).val();
    $.ajax({
      type: 'post',
      url: 'change-name.xhr?name=' + name,
      success: function(){
        $('#fullname').text(name);
      }
    });
});

这在 jsfiddle 中进行了演示