「適用」ボタンと「キャンセル」ボタンを含む編集可能なフィールド

Question

contenteditable="true"という属性のh2タグがあります。目指すのは、contenteditable="false"と、h2のテキストをそれに割り当てるキャンセルボタンです。h2は、最後の編集をクリアし、contenteditableを"false"に設定します。 私のcodepenはhttps://codepen.io/utkapodsousom/pen/dJOMaB です。これらのボタンをバブルや再帰なしで動作させる方法を理解できません。

Answer 1

too much recursionの問題への答えは、このコードでは、.focusを2度書いて関数を呼び出すということです。

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