【javascript縛り】動的追加した要素にイベントを張りたい

Question

いつもお世話になっております。

表題の件、jqueryで動的に追加したhtml要素に対してイベントを張りたいのですが
jqueryだとonイベント等で出来るのはわかるのですが今回はtypescriptで生成したjavascript内で実行したいと思ってます。

<button class="jquery_add_btn">jQueryで動的に追加したボタン</button>

let jquery_add_btn = document.getElementByClassName("jquery_add_btn");

jquery_add_btn.addEventListener("click",function(){
～処理～
});

ざっくりですが上記のようなことをしたいです

よろしくお願いします

Comments

[kei344]

「イベント」の種類とどの要素についてイベント検知するのかによっては動かないものもあります。ある程度具体的にかかれてはいかがでしょう。

Answer 1

// $(document).on('click', '.test', function(event) {
document.addEventListener('click', function(event) {
  var current = event.target.closest('.test');
  if (current) {
    alert('Vanilla JS !');
  }
}, false);

Comments

[hanhunhun]

jQueryで動的に追加したHTML要素に対して上記の方法ではターゲット出来ませんでした。

Answer 2

getElementsXXXなどHTMLCollectionで指定したものは生きているので
後からでも参照できますよ
querySelectorALLで受け取るとNodeListで死んでいるので、
場合によっては処理ごとに再設定する必要があります

追記

上記とは若干主旨がかわりますが、こんな感じでどうでしょう？

document.addEventListener('click',function(e){
  var t=e.target;
  if(t.classList.contains('add_btn')){
    var c=t.cloneNode(true);
    t.parentNode.appendChild(c);
  }
});

<div>
<button class="add_btn">追加</button>
</div>

再度sample

うまくつたわっていないようなので再sample
このままHTMLにコピペして追加でもjQueryで追加でも両方alertがでることを確認してください

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.classList.contains('add_btn')){
    alert('hoge');
  }
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $(".add_btn").after($('<button>').addClass('add_btn').text('jQueryで追加'));
});
</script>
<div>
<button class="add_btn">追加</button>
</div>

Comments

[hanhunhun]

回答ありがとうございます
要素自体はgetElementsByClassNameで取得できるのですがclickイベントが発火しません

[yambejp]

普通に発火するとおもいます、sample追記しときました

Answer 3

こんな感じでどうでしょうか
Element#closestはIE未対応なようなので注意です

<div id="#parent">
  <button>動的に追加したボタン</button>
</div>

interface HTMLElementEvent<T extends HTMLElement> extends Event {
  target: T;
}

document.querySelector('#parent').addEventListener('click', (event: HTMLElementEvent<HTMLInputElement>) => {
  const parent = event.target.closest('#parent')
  if (parent === null) {
    return
  }

  // 処理
}, false)