javascriptが読みこまれていますが、イベントが発火しない原因について

Question

イベントを発火させイメージ画像を投稿したいです。
scaffoldでcontroller等を作成させています。
bootstrapを使用しています。
一応、追記してあります。
エラー画面

view/applications/new
view/applications/_format
= form_for @application do |f|
  - if @application.errors.any?
    #error_explanation
      %h2= "#{pluralize(@application.errors.count, "error")} prohibited this application from being saved:"
      %ul
        - @application.errors.full_messages.each do |message|
          %li= message

  .field
    = f.label :出願人
    = f.text_field :applicant
  .field
    = f.label :出願日
    = f.text_field :application_day
  .field
    = f.label :出願番号
    = f.text_field :application_number
  .field
    = f.label :料金
    = f.text_field :application_fee
  .field
    = f.label :指定商品・役務
    = f.text_field :designated_product
  .fields_for :images do |image|
  %script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"}
  .js-file_group{"data-index" => "#{image.index}"}
    = image.file_field :src, class: 'js-file'
    %br/
    %span.js-remove 削除
    - if @application.persisted?
      = image.check_box :_destroy, data:{ index: image.index }, class: 'hidden-destroy'
        - if @application.persisted?
    .js-file_group{"data-index" => "#{@application.images.count}"}
      = file_field_tag :src, name: "application[images_attributes][#{@application.images.count}][src]", class: 'js-file'
      .js-remove 削除

  .actions
    = f.submit 'Save'

applications/js

$(document).on('turbolinks:load', () => {
  // 画像用のinputを生成する関数
  const buildFileField = (index) => {
    const html = `<div data-index="${index}" class="js-file_group">
                    <input class="js-file" type="file"
                    name="applications[images_attributes][${index}][src]"
                    id="applications_images_attributes_${index}_src"><br>
                    <div class="js-remove">削除</div>
                  </div>`;
    return html;
  }

  // プレビュー用のimgタグを生成する関数
  const buildImg = (index, url) => {
    const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
    return html;
  }

  // file_fieldのnameに動的なindexをつける為の配列
  let fileIndex = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  // 既に使われているindexを除外
  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);

  $('.hidden-destroy').hide();

  $('#image-box').on('change', '.js-file', function (e) {
    const targetIndex = $(this).parent().data('index');
    // ファイルのブラウザ上でのURLを取得する
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);

    // 該当indexを持つimgがあれば取得して変数imgに入れる(画像変更の処理)
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('src', blobUrl);
    } else {  // 新規画像追加の処理
      $('#previews').append(buildImg(targetIndex, blobUrl));
      // fileIndexの先頭の数字を使ってinputを作る
      $('#image-box').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      // 末尾の数に1足した数を追加する
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
    }
  });

  $('#image-box').on('click', '.js-remove', function () {
    const targetIndex = $(this).parent().data('index');
    // 該当indexを振られているチェックボックスを取得する
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    // もしチェックボックスが存在すればチェックを入れる
    if (hiddenCheck) hiddenCheck.prop('checked', true);

    $(this).parent().remove();
    $(`img[data-index="${targetIndex}"]`).remove();

    // 画像入力欄が0個にならないようにしておく
    if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
  });
});

Answer 1

.fields_for :images do |image|以降のインデントが足りないために、.js-file_group{"data-index" => "#{image.index}"}がブロックに入っていないと認識されているのではないでしょうか。

（あと、ループのたびにjQuery本体を読み込んでいるのも意図がわからないです）

Comments

[YUMIYUMO]

ご回答ありがとうございます。
ループの度にjsを読み込めるようにしたのは、なぜか前にjsの非同期が発火しなかった時をこれをすることで解決できたからです。

今の状態としては、
https://gyazo.com/11ae6dacb625e27ebb3d6378865ec167
です。
console.logを確かめたところ$(document)については読み込まれていますが、それ以降読み込まれていません。