動的に生成したボタンのクリックイベントを発火させたい

前提・実現したいこと

八百屋の注文管理システムのようなものを作っています。以下のように動的に追加したボタンに対してイベントを発生させたいのですが、それがうまくいきません。今回はjQueryを使わずに書きたいと思っていたので、なんとかそれを実現しようと色々と調べていますが、jQueryを使ったものしか調べることができずに、困っています。ご教授のほど、よろしくお願いします。

該当のソースコード

html
1<title>購入確認</title>
2  <link rel="stylesheet" href="css/html5reset-1.6.1.css">
3  <link rel="stylesheet" href="css/confirm.css">
4  <script src="js/confirm.js"></script>
5</head>
6<body>
7  <div id="wrapper">
8    <a class="back_btn" href="index.html">←買い物に戻る</a>
9    <div class="conteiner">
10      <h1>購入確認</h1>
11      <ul id="js_shopping_list" class="shopping_list">
12      </ul>
13      <div class="total">
14          <span class="yen_symbol">¥</span>
15          <span id="js_total"></span>
16      </div>
17      <button id="js_confirm" class="confirm_btn">購入確定</button>
18    </div>
19  </div>
20

javascript
1window.onload = function () {
2  items = JSON.parse(localStorage.getItem("items")),//ローカルストレージの商品データの配列
3  ele = document.getElementById('js_shopping_list'),//カートの商品を追加する要素
4  fragment = document.createDocumentFragment(),//DOMの追加処理用のフラグメント
5  total = 0,//商品の合計金額
6  total_ele = document.getElementById('js_total'),//商品の合計金額表示用の要素
7  confirm_btn = document.getElementById('js_confirm');//購入確定ボタン
8  renderConfirm(setDeleteButton);
9  }
10  
11  function setDeleteButton(){
12    delete_btns = document.querySelectorAll('.deletion');//カートボタン 
13  }
14
15  function renderConfirm(callback){
16    console.log('呼ばれてますねい')
17    if (items) {
18      // カート商品の数分、要素を作成
19      for (var i = 0; i < items.length; i++) {
20        var li = document.createElement('li'),
21        h2 = document.createElement('h2'),
22        price = document.createElement('div');
23        deleteButton = document.createElement('input');
24  
25  
26        price.classList.add('price');
27        deleteButton.classList.add('deletion');
28        deleteButton.type = 'button';
29        deleteButton.value = `注文を取り消す`;
30        
31        h2.appendChild(document.createTextNode(items[i].name));
32        price.appendChild(document.createTextNode(items[i].price));
33        li.appendChild(h2);
34        li.appendChild(price);
35        li.appendChild(deleteButton);
36        fragment.appendChild(li);
37  
38        // 合計金額を加算
39        total = total + items[i].price;
40      }
41    
42  
43    // 作成した要素の追加
44    ele.appendChild(fragment);
45    // 合計金額の表示
46    total_ele.innerHTML = total;
47    console.log('ここまで来とる');
48    
49    }
50    callback();
51    console.log(delete_btns);
52    console.log(items);
53  }
54  
55
56  confirm_btn.addEventListener('click',function () {
57    window.alert('購入が確定しました。');
58    localStorage.removeItem('items');
59    remove.innerHTML =  "";
60    renderConfirm();
61  });
62
63
64  window.querySelectorAll('.deletion').forEach(function (delete_btn, index) {
65    delete_btn.addEventListener('click',function () {
66      console.log('ここからbutton');
67      console.log(items);
68      console.log(delete_btns);
69      var remove = document.getElementById('js_shopping_list');
70      items.splice(index, 1);
71      remove.innerHTML =  "";
72      renderConfirm(setDeleteButton);
73
74    });
75  });

試したこと

window.querySelectorAll('.deletion').forEach(function (delete_btn, index) {
delete_btn.addEventListener('click',function () {

これで全ての削除ボタンを配列で取得できると思いましたが、この書き方ではイベントが発火しないようです。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1deleteButton.value = `注文を取り消す`;
2// ここでイベントを追加しておけばよいのでは。
3deleteButton.addEventListener(/* 略 */);

投稿2020/04/28 14:21

kei344

総合スコア69606

sawadai

2020/04/28 14:28

ご回答いただきありがとうございます。というと、追加されたボタンは、 ```html <button type="button" name="name" value="value" onclick=""> </button> ``` のようになるということでしょうか？もし、そのようになる場合、 ```JavaScript window.querySelectorAll('.deletion').forEach(function (delete_btn, index) ``` で受け取っている index は、どのように取得すれば良いのでしょうか？