ある要素をクリックするとinput type="file"のファイル選択ボタンをクリックさせたい。

Question

前提・実現したいこと

画像投稿フォームを作成していますが、デフォルトの「ファイル選択」ボタンが気に入らないため、「.click」クラスをクリックすると「#file」のIDがついたボタンがクリックされた状態にするjqueryを書きましたが、
以下のエラーが発生し、実現できないため、助言いただきたいです。

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

Uncaught RangeError: Maximum call stack size exceeded

該当のソースコード

= form_with model: @sell,url:sells_path, class:"sell-container__form", local:true do |f|
= f.file_field :image,multiple:true,id:'file'
= f.submit "出品する" ,class:"sell-content__btn-red"

$(document).on('turbolinks:load', function() {
    $('.click').on('click',function () {
        //$('.click').off('click');
        $('#file').click();
    });
});

試したこと

$('.click').off('click');として$('.click').click動作を停止したところ、1回目の動作は成功しましたが、
2回目以降offによって動作しなくなりました。

何卒、よろしくお願いいたします。

Answer 1

.get(0)をつけたところ解決しました。

$('.click').on('click',function () {
        $('#file1').get(0).click();
    });