javascript - 要素をインラインでクリックして編集する方法

Question

それが何と呼ばれているのかわかりませんが、たとえば数字を含むをクリックできるようにしたいのですが、クリックしdivた数字が値として入力テキストフィールドに変わります。

次に、番号を編集してオフ（イベント）をクリックすると、新しい編集された番号を示すテキストフィールドからにonblur戻ります。div番号も ajax を介してデータベースに更新されます。

この関数は何と呼ばれますか?
これをコーディングする最良の方法は何ですか?

score 19 · Accepted Answer

次のことができます。

クリックイベントを作成し、div 内のテキストを値として受け取るテキストボックスをオンザフライで作成します。

そのテキストボックスにバインドして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で実証されています