jsで追加したフォームに対してイベントを発火させたい

状況

ｊｓで追加した要素に対してクリック時のイベントを発火させたいのですが、うまくいきません。
もともと記述している要素については問題なくイベント発火します。
jsで追加した要素については何か特別な処理が必要なのでしょうか？

該当コード

haml
1-# フォームのコード
2
3.summary-form-area
4  = f.fields_for :summaries do |s|
5    .input-area-title
6      タイトル
7    .js-file-group{ data: {index: "#{s.index}"} }
8      = s.text_field :title, placeholder: "見出しを入力してください", class: "summary-title-field"
9      = s.text_area :content, placeholder: "概要を入力してください", class: "summary-content-field"
10      = s.text_field :summary_number, value: "#{s.index + 1}"
11      .delete-form-btn
12        削除する
13.add-form-btn
14        追加する

js
1// フォーム追加用のjsファイル
2
3$(function(){
4  function buildFileField(index) {
5    const html = `<div class="js-file-group" data-index="${index}">
6                    <input placeholder="見出しを入力してください" class="summary-title-field" type="text" name="note[summaries_attributes][${index}][title]" id="note_summaries_attributes_${index}_title">
7                    <textarea placeholder="概要を入力してください" class="summary-content-field" name="note[summaries_attributes][${index}][content]" id="note_summaries_attributes_${index}_content"></textarea>
8                    <input type="text" name="note[summaries_attributes][${index}][summary_number]" id="note_summaries_attributes_${index}_summary_number">
9                    <div class="delete-form-btn">削除する</div>
10                  </div>`;
11    return html;
12  }
13
14  let fileIndex = [1, 2, 3, 4]
15
16  $(".add-form-btn").on("click", function() {
17    $(".summary-form-area").append(buildFileField(fileIndex[0]));
18    let index = fileIndex[0] + 1
19    $(`input#note_summaries_attributes_${fileIndex[0]}_summary_number`).val(index);
20    fileIndex.shift();
21    if (fileIndex.length == 0) $(".add-form-btn").remove();
22  })
23
24// ↓このイベントが追加した削除するをクリックしても発火しない
25  $(".delete-form-btn").on("click", function() {
26    console.log("OK");
27  })
28})