jqueryを用いて画像選択後にプレビュー表示をさせたいが、リロードをしないとプレビュー表示されない。

Question

前提・実現したいこと

環境
ruby 2.5.1
rails 5.2

railsで写真投稿アプリケーションを作成しています。
写真投稿時にjqueryを用いて、
画像をプレビュー表示させたいと思っていますが、
写真を選択してもプレビュー表示されません。

発生している問題・エラーメッセージ

リロードをしてから、再度写真を選択するとプレビュー表示が成功します。
リロードをしなくとも、一発で写真をプレビュー表示をさせたいのですが、
うまく実装できません。

該当のソースコード

.container
  .form
    = form_with(model: @post, local: true) do |form|
      .form__h3 投稿する
      = form.label '写真を選択してください' do
        ＃img-field{onclick: "$('#file').click()"}
          - if @post.image.url.present?
            = image_tag(@post.image.url)
          - else
            .field-icon
              = icon('fas', 'image', class: "field-icon__image")
              %apan.field-icon__text 写真を選択してください
      = form.file_field :image, class: "form__field", style: "display:none;", id: "file"
      = form.text_field :title, placeholder: "タイトル", class: "form__input"
      = form.text_area :text, placeholder: "説明" , rows: "10", class: "form__input"
      = form.submit "SEND", class: "form__btn form__input"

$(function(){
  fileField = $('#file')
  // 選択された画像を取得し表示
  fileField.on('change', fileField, function(e) {
    var file = e.target.files[0]
    var reader = new FileReader(),
    $preview = $("#img-field");
    reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
          src: e.target.result,
          width: "100%",
          class: "preview",
          title: file.name
        }));
      };
    })(file);
    reader.readAsDataURL(file);
  });
});

#img-field {
text-align: center;
width: 528px;
height: 320px;
font-size: 15px;
margin: 10px 66px;
border: 1px solid #D8D8D8;
color: #666;
border-radius: 5px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
transition: 0.3s ease-out;
  &:hover {
  background-color: #3AD6B2;
  transition: 0.3s ease-out;
  opacity: 0.9;
  }
}

.preview{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-icon{
  text-align: center;
  color: #aaa;
  position: relative;
  &__image{
    display: inline;
    font-size: 70px;
    line-height: 320px;
    transition: 0.3s ease-out;
    &:hover {
      transition: 0.3s ease-out;
      opacity: 0.9;
    }
  }
  &__text{
    display: block;
    position: absolute;
    bottom: 90px;
    right: 182px;
  }
}

どうぞよろしくお願いいたします。

Answer 1

Turbolinksによる影響だと思います。
下記のように$(document).on('turbolinks:load', function() {});で囲むとうまくいくかと思います。

$(document).on('turbolinks:load', function() {
  //ここにJqueryのコードを記載する。
});

Comments

[Sakamotos]

no1knows様
ご回答頂き誠にありがとうございます。
回答いただいた通りに修正した所、解決いたしました。
私自身、Turbolinksに関して知識が乏しかったため、
改めてTurbolinksに関して、勉強してみます。
この度はありがとうございました。

[no1knows]

それは良かったです！