jQueryを使ってDOM要素をクリックしたときに編集できるようにする

jQueryを使って「inplace editor」を作る。

(function(documet){

    $(document).ready(function(){
           $(target_id).click(edit_togle());
    });


    function edit_togle(){
        var edit_flag = false;
        return function(){
            if(edit_flag) return;
            var $input = $("<input>").attr("type","text").val($(this).text());
            $(this).html($input); 

            $("input", this).focus().blur(function(){
                save($(this).val());
                $(this).after($(this).val()).unbind().remove();
                edit_flag = false;
            });
            edit_flag = true;
        }
    }    

    function save(value){
        alert("「"+value+"」を保存しました"); //保存する処理をここに書く
    }
})(document);

参考
jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place）