Jqeuryでappendの使い方

Question

お世話になります。
親カテゴリ内でボタンを押すと要素が追加され、さらにその子カテゴリ中でも要素を追加したいのですが、
下記のボタンAは問題なく動作するのですが、押したあとに表示されるボタンBのボタンが動作せず悩んでいます。
appendで追加したボタンは文字と認識されて動作させれないのでしょうか？
ご指導の程お願いいたします。

<ul>
  <li>要素１</li>
  <li>要素２</li>
  <li>要素３</li>
</ul>
<button id="button_a">ボタンA</button>

[Jquery]
$("#button_a").on("click", function(){
  $("ul").append("<button id='button'>ボタンB</button>");
});
$("#button_b").on("click", function(){
  $("ul").append("<li>小要素</li>");
});

Answer 1

$("ul").append("<button id='button'>ボタンB</button>"); とされていますが、そもそもHTMLの文法上おかしなことになります。UL要素の直下にbutton要素は置けません。

また、idを指定してしまっているので、HTML上に同じidが複数作成されることになるので、それも文法上問題があります。そういう場合はクラスで書きましょう。

【ul 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

---

後から追加した要素にイベントを適用させるには下記のような方法があります。

$( 'body' ).on( 'click', '.button', function() {
    // 何らかの処理
} );

【【jQuery】onメソッドの使用方法 - Qiita】
https://qiita.com/katsunory/items/7b50d399329767a893e1

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

Answer 2

button_aで作られる要素(button_b)のクリック動作を、要素が作られる前に定義しているからでしょう。
期待する動作かどうかはわかりませんが、ボタンBを動かすだけなら以下でできると思います。

$("#button_a").on("click", function(){
  $("ul").append("<button id='button_b'>ボタンB</button>");
  $("#button_b").on("click", function(){
    $("ul").append("<li>小要素</li>");
  });
});

※id=buttonとなっていたところは勝手にbutton_bに直しました。

Answer 3

もしかしてこういうことなのでしょうか？

$(function(){
  $('#button_a').on('click',function(e){
    $('li:not(:has(.button_b))').append($('<button>').addClass('button_b').text('ボタンB'));
  });
  $('ul').on('click','.button_b',function(e){
    $(this).closest('li:not(:has(ul))').append($('<ul>'));
    $(this).closest('li').children('ul').eq(0).append($('<li>').text('小要素'));
  });
});

<ul>
<li>要素１</li>
<li>要素２</li>
<li>要素３</li>
</ul>
<button id="button_a">ボタンA</button>