jQueryのappendで追加した要素に対して、イベントを発生させたい

Question

実現したいこと

$.eachで回している時に、appendで追加した要素に対して、アコーディオンリストの自動開閉イベントを発生させたいです

発生している問題

$.eachで作成したアコーディオンリストの自動開閉がうまくいかないです。
$.eachで作成したアコーディオンリストをクリックすると、開いてすぐに閉じてしまいます。

該当のソースコード

<div class="wrap">
    <h3 class="open_h3 btn-7">test1</h3>
    <ul class="open_parent open-7"></ul>
    <h3 class="open_h3 btn-7">test2</h3>
    <ul class="open_parent open-7"></ul>
    <!-- <h3 class="open_h3 btn-7">BRAND INFO</h3>
    <ul class="open_parent open-7"></ul> -->
</div>

var li_1 = "";
for (var i = 1; i <= 5; i++) {
  li_1 += "<li>項目" + i + "</li>";
}
var array = ["A", "B"];
var append_parent = "";
var append_child = "";

$.each(array, function (index, val) {
  $('ul.open_parent').each(function () {
    append_parent = $('<li><h3 class="open_h3 btn-8">' + val + '</h3></li>');
    append_child = $('<ul class="open_child open-8">' + li_1 + '</ul>');
    $(this).append(append_parent);
    $(this).children('li').append(append_child);
  });
  
　// サブメニューを閉じる
  append_child.ready(function () {
    $('.open-8').hide();
  });

　// サブメニューの自動開閉
  append_parent.ready(function () {
    $('.btn-8').click(function () {
      $(this).next('.open-8').slideToggle('slow').siblings('.open-8').slideUp('slow');
      $(this).siblings('.btn-8').removeClass('active');
      $(this).toggleClass('active');
    });
  });
});

  $('.open-7').hide();

  $('.btn-7').click(function () {
    $(this).next('.open-7').slideToggle('slow').siblings('.open-7').slideUp('slow');
    $(this).siblings('.btn-7').removeClass('active');
    $(this).toggleClass('active');
  });

.wrap {
  width: 800px;
  padding: 10px 20px;
  border: 1px solid #000;
}
h3.open_h3 {
  border-bottom: 1px dotted #a9a9a9;
  cursor: pointer;
  margin: 0;
}
.open_h3:after,
.open_h3.active:after {
  font-size: 22px;
  margin-left: 20px;
}
.open_h3.active::after {
  content: "▲";
}
.open_h3::after {
  content: "▼";
}
.info {
  font-size: 13px;
}

試したこと

$.eachの外にappend_child.readyとappend_parent.readyを置いて実行してみました。
ですが、他のサブメニューをクリックしても、自動開閉が出来ませんでした。

どうかご助言を頂けたらと存じます。

また、多階層アコーディオンメニューの自動開閉で、addEventListenerを使って、
簡単に書くことが出来れば、そちらもご助言いただけたらと存じます。

Answer 1

イベントをhtmlに追加後に毎回addするか、documentからonでイベント付与してください。

動的に生成したDOM要素に対してjQueryでイベントを設定する場合

Comments

[unwind]

m.ts10806様
コメント頂きありがとうございます。

javascriptの部分で、

$(document).on("click", ".btn-8", function () {
$('.open-8').hide();
$(this).next('.open-8').slideToggle('slow').siblings('.open-8').slideUp('slow');
$(this).siblings('.btn-8').removeClass('active');
$(this).toggleClass('active');
});

と書きましたら、自動で開閉が出来ました。ありがとうございます。

そこで、閉じるときのアニメーションが無くなってしまったのですが、
閉じるときのアニメーションを設定するものも、document.on("load", "open-8", function(){});
の中に記述すればよろしいでしょうか。

宜しくお願い致します。

[m.ts10806]

理論がわかればあとは色々やってみることです。

[unwind]

m.ts10806様、承知しました。
お手数かけていただき、ありがとうございます。

Answer 2

jQueryっぽくかくならこんな感じ？

$(function(){
  var child=$('<ul class="open_child open-8">')
  for(var i=1;i<=5;i++){
    child.append($('<li>').text('項目'+i));
  }
  var array = ["A", "B"];
  $('.open_parent').append($.map(array,function(val){
    return $('<li>').append($('<h3 class="open_h3 btn-8">').text(val)).append(child.clone());
  }));
  $('.open_h3').on('click',function(){
    $(this).next('ul').slideToggle();
  }).next('ul').hide();
});

Comments

[yambejp]

あとは細かい挙動の説明がされてないのでご自身で調整下さい

[unwind]

yambejp様、jQueryの部分をわかりやすくしていただき、ありがとうございます。
細かい挙動については、適宜修正していこうと思います。