現状、背景

フリマアプリの出品した商品を編集する機能を実装していて、ここでは　gem "gon"　を使用して、出品した写真のデータ等を追加、削除できる機能実装したところ、

他の機能(商品出品、メインページにかけてるJS等）で、JSを使用したところが効かなくなるエラーが出てしまっている状況です。

エラー内容

　他のJavascriptが効かなくなっている！！

　該当コード

items.controller


def update
    @item = Item.find(params[:id])
    @images = @item.images

    ids = @item.images.map{|image| image.id }

    exist_ids = registered_images_params[:ids].map(&:to_i)

    exist_ids.clear if exist_ids[0] == 0

    if (exist_ids.length != 0 || new_image_params[:images][0] != " ") && @item.update!(item_update_params)  # ||はor（または）


      unless ids.length == exist_ids.length

        delete_ids = ids - exist_ids
        delete_ids.each do |id|
          @item.images.find(id).destroy
        end
      end


      unless new_image_params[:images][0] == " "
        new_image_params[:images].each do |image|
          @item.images.create(image_url: image, item_id: @item.id)
        end
      end

      # flash[:notice] = '編集が完了しました'
      respond_to do |format|
        format.js { render ajax_redirect_to(item_path(@item)) }
      end

    else
      flash[:alert] = '未入力項目があります'
      rener :edit
    end

  end

  def get_category_children
    @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children
  end

  def get_category_grandchildren
    @category_grandchildren = Category.find("#{params[:child_id]}").children
  end


  private

  def item_update_params
    params.require(:item).permit( :name, :description, :category_id, :size_id, :brand_id, :prefecture_id, :condition_id, :delivery_charge_id, :delivery_way_id, :delivery_days_id, :price)
  end

  def registered_images_params
    params.require(:registered_images_ids).permit({ids: []})
  end

  def new_image_params
    params.require(:new_images).permit({images: []})
  end

  def set_category
    @category_parent_array = ["---"]
    Category.where(ancestry: nil).each do |parent|
      @category_parent_array << parent.name
    end
  end

  def set_gon
    @item= Item.find(params[:id])
    @images = @item.images

    gon.item = @item
    gon.images = @item.images


    # @item.images.image_urlをバイナリーデータにしてビューで表示できるようにする
    require 'base64'
    gon.images_binary_datas = []
    if Rails.env.production?
      client = Aws::S3::Client.new(
                             region: 'ap-northeast-1',
                             access_key_id: ENV["AWS_ACCESS_KEY_ID"],
                             secret_access_key: ENV["AWS_SECRET_ACCESS_KEY"],
                             )
      @item.images.each do |image|
        binary_data = client.get_object(bucket: 'freemarket-sample66e', key: image.image_url.file.path).body.read
        gon.images_binary_datas << Base64.strict_encode64(binary_data)
      end
    else
      @item.item_images.each do |image|
        binary_data = File.read(image.image_url.file.file)
        gon.images_binary_datas << Base64.strict_encode64(binary_data)
      end
    end
  end
end

Edit.JS


$(function() {

  var dropzone = $(".item__img__dropzone__input");
  var dropzone2 = $(".item__img__dropzone2__input2");
  var appendzone = $(".item__img__dropzone2")
  var input_area = $(".input-area");
  var preview = $("#preview");
  var preview2 = $("#preview2");

  var images = [];
  var registered_images_ids =[]
  var new_image_files = [];

  gon.images.forEach(function(image, index) {
    var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);

    img.data("image", index)

    var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');

    img.append(btn_wrapper);

    binary_data = gon.images_binary_datas[index]

    img.find("img").attr({
      src: "data:image/jpeg;base64," + binary_data
    });
    images.push(img)
    registered_images_ids.push(image.id)
  })

  if (images.length <= 4) {
    $('#preview').empty();
    $.each(images, function(index, image) {
      image.data('image', index);
      preview.append(image);
    })
    dropzone.css({
      'width': `calc(100% - (20% * ${images.length}))`
    })

  } else if (images.length == 5) {
    $("#preview").empty()
    $.each(images, function(index, image) {
      image.data("image", index);
      preview.append(image);
    });
    appendzone.css({
      display: "block"
    });
    dropzone.css({
      display: "none"
    });
    preview2.empty();


  } else if (images.length >= 6) {

    var pickup_images1 = images.slice(0, 5);

    $('#preview').empty();
    $.each(pickup_images1, function(index, image) {
      image.data('image', index);
      preview.append(image);
    })

    var pickup_images2 = images.slice(5);

    $.each(pickup_images2, function(index, image) {
      image.data('image', index + 5);
      preview2.append(image);
    })

    dropzone.css({
      'display': 'none'
    })
    appendzone.css({
      'display': 'block'
    })
    dropzone2.css({
      'display': 'block',
      'width': `calc(100% - (20% * ${images.length - 5}))`
    })

    if (images.length == 10) {
      dropzone2.css({
        display: "none"
      });
    }
  }

  var new_image = $(
    `<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
  );
  input_area.append(new_image);

  $("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on("change", 'input[type= "file"].upload-image', function() {
    var file = $(this).prop("files")[0];
    new_image_files.push(file)
    var reader = new FileReader();
    var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);

    reader.onload = function(e) {
      var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');

      img.append(btn_wrapper);
      img.find("img").attr({
        src: e.target.result
      });
    };

    reader.readAsDataURL(file);
    images.push(img);

    if (images.length <= 4) {
      $('#preview').empty();
      $.each(images, function(index, image) {
        image.data('image', index);
        preview.append(image);
      })
      dropzone.css({
        'width': `calc(100% - (20% * ${images.length}))`
      })

    } else if (images.length == 5) {
      $("#preview").empty()
      $.each(images, function(index, image) {
        image.data("image", index);
        preview.append(image);
      });
      appendzone.css({
        display: "block"
      });
      dropzone.css({
        display: "none"
      });
      preview2.empty();

    } else if (images.length >= 6) {

      var pickup_images = images.slice(5);

      $.each(pickup_images, function(index, image) {
        image.data("image", index + 5);
        preview2.append(image);
        dropzone2.css({
          width: `calc(100% - (20% * ${images.length - 5}))`
        });
      });

      if (images.length == 10) {
        dropzone2.css({
          display: "none"
        });
      }
    }

    var new_image = $(
      `<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
    );
    input_area.append(new_image);
  });

  $("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on('click', '.btn_delete', function() {

    // 削除ボタンを押した画像を取得
    var target_image = $(this).parent().parent();

    var target_image_num = target_image.data('image');

    target_image.remove();

    images.splice(target_image_num, 1);


    if (target_image_num < registered_images_ids.length) {
      registered_images_ids.splice(target_image_num, 1);
    } else {
      new_image_files.splice((target_image_num - registered_images_ids.length), 1);
    }

    if(images.length == 0) {
      $('input[type= "file"].upload-image').attr({
        'data-image': 0
      })
    }

    if (images.length <= 4) {
      $('#preview').empty();
      $.each(images, function(index, image) {
        image.data('image', index);
        preview.append(image);
      })
      dropzone.css({
        'width': `calc(100% - (20% * ${images.length}))`,
        'display': 'block'
      })
      appendzone.css({
        'display': 'none'
      })

    } else if (images.length == 5) {
      $('#preview').empty();
      $.each(images, function(index, image) {
        image.data('image', index);
        preview.append(image);
      })
      appendzone.css({
        'display': 'block',
      })
      dropzone2.css({
        'width': '100%'
      })
      dropzone.css({
        'display': 'none'
      })
      preview2.empty();

    // 画像が６枚以上のとき
    } else {
      // １〜５枚目の画像を抽出
      var pickup_images1 = images.slice(0, 5);

      // １〜５枚目を１段目に表示
      $('#preview').empty();
      $.each(pickup_images1, function(index, image) {
        image.data('image', index);
        preview.append(image);
      })
      // ６枚目以降の画像を抽出
      var pickup_images2 = images.slice(5);
      // ６枚目以降を２段目に表示
      $.each(pickup_images2, function(index, image) {
        image.data('image', index + 5);
        preview2.append(image);
        dropzone2.css({
          'display': 'block',
          'width': `calc(100% - (20% * ${images.length - 5}))`
        })
      })
    }
  })

  $('.edit_item').on('submit', function(e){

    e.preventDefault();  
    var formData = new FormData($(this).get(0));

    if (registered_images_ids.length == 0) {
      formData.append("registered_images_ids[ids][]", 0)

    } else {
      registered_images_ids.forEach(function(registered_image){
        formData.append("registered_images_ids[ids][]", registered_image)
      });
    }


    if (new_image_files.length == 0) {
      formData.append("new_images[images][]", " ")

    } else {
      new_image_files.forEach(function(file){
        formData.append("new_images[images][]", file)
      });
    }
    $.ajax({
      url:         '/items/' + gon.item.id,
      type:        "PATCH",
      data:        formData,
      contentType: false,    
      processData: false,      
    })
  });
});

長々しくてすいません

解決策

Edit.js


$(function(){

  if (typeof gon != "undefined") {   //gonがundefinedじゃなかったらという条件分岐

  var dropzone = $(".item__img__dropzone__input");
  var dropzone2 = $(".item__img__dropzone2__input2");
  var appendzone = $(".item__img__dropzone2")
  var input_area = $(".input-area");
  var preview = $("#preview");
  var preview2 = $("#preview2");

これを記述する事で　”Gon＂を使用したところだけにEdit.jsが効くことになり、無事エラー解決しました！
そもそも　"gon"って何よ！から始まりました...

最後に

このやり方は、すごく複雑なので、もっといい方法があると思います！！
しかし、難しいことを実装して、エラー解決できた事は、少し自信がつきました！！