動的に追加した要素から document.execcommand()が効かない

Question

前提・実現したいこと

jQueryで動的に追加した要素をトリガーに document.execcommand()を実行したいです。

自作のwysiwygエディタを開発していおり、document.execcommand()を利用してboldやunderlineなどなどの装飾を施したいのですが、以下のようなコードでjQueryで動的に追加した要素からだとうまく動作しません。

jQueryで動的に追加した要素から実行したい理由はツールバーの位置を固定したくないためです。
（編集する要素のすぐ上に出したい）

該当のソースコード

//要素の中身変更
$(document).ready(function(){
  $(".js-edit-area").on("click", function(){
    // propでクラスを取らないと生DOM操作後のクラスを反映してくれないため
    if($(this).prop('class')=='js-edit-area')
    {
      window.editingDom = $(this);
      $(this).wrap('<div id="editspace" contentEditable="true"></div>');
      $('#editspace').before('<ul class="js-edit-tools edit-tools">'
        + '<li class="js-bold-button edit-tools__item">太字</li>'
        + '<li class="js-underline-button edit-tools__item">下線</li>'
        + '<li class="js-color-button edit-tools__item">文字色</li>'
        + '<li class="js-edit-submit edit-submit edit-tools__item">変更を保存する</li>'
      + '</ul>');
      $(this).removeClass('js-edit-area');
      console.log($(this).html());
    }

  });
});


$(document).on("click", ".js-bold-button", function () {
    document.execCommand("bold", true, "" );
    console.log($('#editspace').html());
});


$(document).on("click", ".js-underline-button", function () {
    document.execCommand("underline", true, "" );
    console.log($('#editspace').html());
});
//要

試したこと

htmlファイルの方に書くと正常に動作します。

<div id="toolbar">
  <button id="bold" class="js-bold-button">太字にする</button>
  <button id="bold" class="js-underline-button">下線にする</button>
</div>

'.js-edit-area' が割り当てられている要素（例）

  <div class="contents_wrap flexContainer">
    <a class="js-edit-area" href="#">初回無料相談のお申し込みはこちら</a> 
  </div>

補足情報（FW/ツールのバージョンなど）

jQuery: 3.2.1
HTML5

どうぞよろしくお願いいたします。

Comments

[s8_chu]

`.js-edit-area`の割り当てられた要素はどのようになっているか、質問文に追記していただけませんか？

[alberorana]

.js-edit-areaは 編集したい項目に動的に wrapされるようになっておりまして、そのイメージを追記いたしますね。

Answer 1

問題はマウスダウンで選択が解除されてしまうことなので、この動きを止めればテキストでも動きます。

$(document).on('mousedown', '.js-bold-button,.js-underline-button', function(event) {
    event.preventDefault();
    return false;
});

Answer 2

【自己解決しました】
結論は liタグをbuttonタグにしたら動きました。
どうやらdocument.execcommand()のトリガーはliタグではだめなようでした。