'적용'및 '취소'버튼이있는 편집 가능한 입력란 (너무 많은 재귀)

Question

contenteditable="true"이라는 태그가있는 h2 태그가 있습니다. 목표는 '적용'버튼을 클릭하여 contenteditable="false"을 작성하고 h2 텍스트를 초기 값인 h2에 지정하는 '취소'버튼을 사용하여 마지막 편집을 지우고 contenteditable을 "false"으로 설정합니다. 내 코드 패드는 https://codepen.io/utkapodsousom/pen/dJOMaB 버블 링과 재귀없이 버튼을 작동시키는 방법을 알아낼 수 없습니다.

Answer 1

too much recursion 문제에 대한 대답은이 코드에서 .focus을 두 번 작성하여 함수 자체를 호출한다는 것입니다.

$('.editable').on('click focus', function(e) { 
    $(this).attr('contenteditable', 'true'); 
    $(this).focus(); 
    e.stopPropagation(); 
});