JavaScriptの関数の実行タイミングを一番最後にしたい

Question

やりたいこと

Ruby on Railsを使ってWebアプリケーションを作成しています。
nested_form_fieldsというgemを使って、動的に画像アップロードフォームを含めた入力フォームを動的に追加できる機能を実装しており、この追加された画像アップロードフォームのそれぞれに対して画像プレビュー機能をつけたいと考えています。

イメージ画像

// _form.html.slim
= f.nested_fields_for :gears, wrapper_tag: :div do |g|
  .item
    .row
      .col-6
        .form-group
          = g.label :gear_image
          - if g.object.gear_image?
            = image_tag(g.object.gear_image.url, id: 'preview__nested_field_for_replace_with_index__', class: 'gear_image')
          - else
            = image_tag('nofile.jpg', id: 'preview__nested_field_for_replace_with_index__', class: 'gear_image')
          = g.file_field :gear_image, class: "form-control-file gear-file-form"
      .col-6
        .form-group
          = g.label :name
          = g.text_field :name, class: "form-control"
        .form-group
          = g.label :brand
          = g.text_field :brand, class: "form-control"
        .form-group
          = g.label :kind
          = g.select :kind, gear_type_list, { include_blank: true }, class: "form-control"
        .form-group
          = g.label :model_year
          = g.text_field :model_year, class: "form-control"
        = g.remove_nested_fields_link '削除', class: 'btn btn-danger', role: 'button'
= f.add_nested_fields_link :gears, '＋', class: 'btn btn-primary', role: 'button', id: 'add-form'

// application.js
document.addEventListener('DOMContentLoaded', function () {
  var index = 1;
  var fuga = '#preview';

  document.getElementById('add-form').addEventListener("click", function () {
    index += 1;
    // とりあえず以下２通り試しましたがフォーム作成前に実行されてしまいます。
    hogehoge(index);  // 1
    window.onload = hogehoge(index); // 2
  }, false);

  // 関数①
  function hogehoge(index) {
    for (var i = 0; i < index; i++) {
      (function (j) {
        fuga += j.toFixed();
        var id = 'article_gears_attributes_' + j + '_gear_image';
        document.getElementById(id).addEventListener("change", function (evt) {
          var file = evt.target.files;
          var reader = new FileReader();
          reader.readAsDataURL(file[0]);
          reader.onload = function () {
            document.querySelector(fuga).src = reader.result;
          }
        }, false);
      }(i));
    }
  };
  window.onload = hogehoge(index);
});

問題点

JavaScriptで

1. フォームの数だけ画像アップロードフォームにイベントを追加する関数hogehogeを定義・・・①
2. ページ読み込み時に①を実行
3. フォームの追加ボタン（画像では＋ボタン）を押下した時に①の関数hogehogeを再実行

という流れを思い浮かべていたのですが、3.でフォームがnested_form_fieldsによって追加される前に
①の関数hogehogeが実行されてしまい、Uncaught TypeError: Cannot read property 'addEventListener' of nullを吐いてしまいます。

フォームが追加された後に関数hogehogeを実行させるようにしたいのですが、なにか良いやり方はないでしょうか？

Answer 1

こんにちは、m-88888888さん

質問拝見しました。

早速ですが、問題点の3は、おそらくwindow.onloadに、hogehogeメソッドを実行した返り値を渡すようになっているからだと思います。
window.loadに渡せるのは、関数自体になるので、質問と同じ条件でindexを渡した状態で関数を渡したいのであれば、bindメソッドを利用すると良いと思います。
こうすれば、 DOMContentLoadedイベント時に、window.onloadがセットアップされ、loadイベントが完了したあとに、indexを捕捉した状態でhogehogeメソッドが実行されます。

window.load
Function.prototype.bind()

// application.js
document.addEventListener('DOMContentLoaded', function () {

  ...(省略)

  window.onload = hogehoge.bind(this, index);
});

以上、参考になれば、幸いです。

Comments

[m-88888888]

ご指摘の通り、bindメソッドを使用したところエラーの表示までは解消されましたが、肝心の関数hogehogeは実行された形跡が見られませんでした。
おそらく今回の問題とはまた別？だと思うので、こちらは自分で取り組んでみます。
この度はご回答いただき誠にありがとうございました！