PHPAdmin처럼 클릭하여 요소 변경

Question

나는 초보자입니다. PHPAdmin과 같은 편집기를 만들고 싶습니다. 표를 클릭하면 필드가 텍스트 영역으로 변경됩니다. 텍스트 영역 밖의 다른 부분을 클릭하면 파일 영역으로 다시 바뀌고 SQL을 실행합니다.

다음은 내가 jQuery로 작성한다고 가정합니다. 어떻게 코딩해야하는지 완전히 이해할 수 없습니다. 조언을 바랍니다.

$('#editor #gird_edit').bind({ 
    click: function() { //When Click 
     var content = $(this).text(); // read what is in the filed 
     $("#gird_edit").text('<textarea>'+a+'</textarea>'); // This is not work, will only add html code,not change to text-area 
    }, 
    /* ??? */: function() { //Outside click of the text-area 
     var content = $(this).text(); // read what is in the text-area 
     $("#gird_edit").text(????); // change back to the filed 
    } 
}) 

HTML을

<div id='editor'> 
    <div id='gird_edit'>hallo world</div> 
    <div id='gird_edit'>hallo world 2</div> 
    <div id='gird_edit'>hallo world 3</div> 
</div> 

나는 단지 3 개의 명성, 단지 합류 어제가 ... 나는 그것이 15 명성을 필요로하기 때문에 내가 당신을 투표 할 수 죄송합니다. 그러나, 나는 당신이 도와 줘서 고맙습니다!

Answer 1

요소 외부에서 클릭을 감지하려면 전체 페이지에서 해당 요소를 감지하고 요소 내부에서 발생한 클릭을 모두 버립니다. 즉 : 당신이 정말 찾고있는 것은 누군가가 텍스트 영역 안에이었고, 단지 그것을 왼쪽 때마다 트리거 것 "흐리게"핸들러,처럼 그러나

$('body').on('click', : function(e) { //Outside click of the text-area 
    if ($(this).parents().is('#gird_edit')) return false; 
    var content = $('textarea').text(); // read what is in the text-area 
    $("#gird_edit").text(????); // change back to the filed 
}); 

, 그것은 소리; 당신은 당신이 클릭 핸들러를 만들 때와 같은 기본적인 방법 중 하나를 만들 수 있습니다 :

$('#gird_edit textarea').bind({ 
    blur: function() { 
     // do the reverse of the click handler 
}