safariでjsが動かない

Question

現在、それぞれのブラウザで動作チェックを行なっているのですが、safariだけjsが反応しないので質問させていただきました。safariで動作するためにはどうしたら良いのでしょうか？

<div class="images-field clearfix">
  <%= f.label :image %>
  <%= f.file_field :images, multiple: true, class: "file-input" %>
  <% if @item.images.attached? %>
    <% @item.images.each do |image| %>
      <div class="image-box">
        <%= image_tag image.variant(resize: '100x100'), class:"item_images" %>
        <p> <%= image.filename %> </p>
        <%= f.hidden_field :images , name: "item[images][]", value: "#{image.blob.id}", style: "display: none;", class: "item-images-input" %>
        <%= link_to "Edit", "", class: "btn-edit" %>
        <%= file_field "edit-image","" , class: "edit-image-file-input file-input", style: "display: none;"%>
        <%= link_to "Delete", "", class: "btn-delete" %>
      </div>
    <% end %>
  <% end %>
</div>

$(document).on('click', function() {

  $('#item_images').on('change',function(e){
    var files = e.target.files;
    var d = (new $.Deferred()).resolve();
    $.each(files,function(i,file){
      d = d.then(function() {
          return Uploader.upload(file)})
        .then(function(data){
          return previewImage(file, data.image_id);
      });
    });
    $('#item_images').val('');
  });

  $('.images-field').on('click','.btn-edit', function(e){
    e.preventDefault();
    $(this).parent().find('.edit-image-file-input').trigger("click");
  });

  $('.images-field').on('change','.edit-image-file-input', function(e){
    var file = e.target.files[0];
    var image_box = $(this).parent();
    Uploader.upload(file).done(function(data){
      replaceImage(file, data.image_id, image_box);
    });
  });

  $('.images-field').on('click','.btn-delete', function(e){
    e.preventDefault();
    $(this).parent().remove();
  });

  var replaceImage = function(imageFile, image_id, element){
    var reader = new FileReader();
    var img = element.find('img');
    var input = element.find('.item-images-input');
    var filename = element.find('p');
    reader.onload = function(e){
      input.attr({value: image_id});
      filename.html(imageFile.name);
      img.attr("src", e.target.result);
    };
    reader.readAsDataURL(imageFile);
  }

  var previewImage = function(imageFile, image_id){
    var reader = new FileReader();
    var img = new Image();
    var def =$.Deferred();
    reader.onload = function(e){
      var image_box = $('<div>',{class: 'image-box'});
      image_box.append(img);
      image_box.append($('<p>').html(imageFile.name));
      image_box.append($('<input>').attr({
            name: "item[images][]",
            value: image_id,
            style: "display: none;",
            type: "hidden",
            class: "item-images-input"}));
      image_box.append('<a href="" class= "btn-edit">Edit</a>');
      image_box.append($('<input>').attr({
            name: "edit-image[]",
            style: "display: none;",
            type: "file",
            class: "edit-image-file-input file-input"}));
      image_box.append('<a href="" class="btn-delete">Delete</a>');
      $('.images-field').append(image_box);
      img.src = e.target.result;
      def.resolve();
    };
    reader.readAsDataURL(imageFile);
    return def.promise();
  }

  var Uploader = {
    upload: function(imageFile){
      var def =$.Deferred();
      var formData = new FormData();
      formData.append('image', imageFile);
      $.ajax({
        type: "POST",
        url: '/items/upload_image',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: def.resolve
      })
      return def.promise();
    }
  }
})

Comments

[maisumakun]

Safariの動いているデバイスは何でしょうか？

[Masashige1005]

Macbookです。

[maisumakun]

ブラウザコンソールにエラーなどは出ていませんか？

[Masashige1005]

コンソールでは特にエラー表示されていないです。

[m.ts10806]

たくさんイベント書かれてますが、どの時点で動作しないのでしょうか。期待する動作は何でしょうか

[m.ts10806]

あと、Railsでないといけないのでしたら、タグに追加してください。
Javascriptだけでは再現確認できる人は多くはないです。

[Masashige1005]

タグの更新をしました。
ドラッグ＆ドロップでは反応するのは確認できましたが、ファイル選択ボタンが全く反応していないです。
ファイル選択でファイルを選択できるような動作を期待しております。
※cursor:pointerを付与したのですが、解決には至っておりません。

Answer 1

safariはイベントハンドラの第2引数にセレクタを指定しないとイベントがバブリングしなかったはずです。

それを踏まえて、この部分だけ第2引数を指定していないのは何か理由があるのでしょうか。

//ここだけ第2引数がない
 $('#item_images').on('change',function(e){
    var files = e.target.files;
    var d = (new $.Deferred()).resolve();
    $.each(files,function(i,file){
      d = d.then(function() {
          return Uploader.upload(file)})
        .then(function(data){
          return previewImage(file, data.image_id);
      });
    });
    $('#item_images').val('');
  });