現在フリーマーケットアプリを自作しているものです。
商品画像出品機能の実装中にエラーが出ました。

実現したいこと

指定したblock要素をクリックするとfile_fieldが開かれて画像が登録できるようにしたい。

現在の状況

haml
1        .exhibition-image-container__field
2        = icon('fas', 'camera', class: "exhibition-image-container__field--input--icon")
3        %p.exhibition-image-container__field--text
4          ドラッグアンドドロップ
5          %br/
6          またはクリックしてファイルをアップロード
7        = f.fields_for :images do |i|
8          = i.file_field :image, style: "display:none;",height:"100%",width:"100%", id:"file"
9

クリックと同時に#fileもクリックという動作を実現するためにこのコードを書きました。

jquery
1$(function(){
2  $('.exhibition-image-container__field').on('click',function(){
3    $('#file').click();
4  })
5})

起きている問題

　タイトルにもある通り、Uncaught RangeError: Maximum call stack size exceeded
検証で確認できたエラー表示箇所

if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
	return;	}

Uncaught RangeError: Maximum call stack size exceeded

上記の表示が出て　jquery が動作しません。
解決策としてはどのようにするべきか教えていただけますでしょうか？
よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

Hamlはよくわかりませんが、.exhibition-image-container__fieldの中に#fileがあるなら、クリックイベントは伝播するので無限ループすると思います。クリックされた要素が何かを確認したほうが良いでしょう。
また、Hamlが勝手にやってくれるすばらしいものの可能性もありますが、id:"file"で指定するとid="file"の要素がHTML上に複数出ることになりませんか？文法的に問題があり、クリックイベントの処理にも障害が出るので確認することをお勧めします。

【Event.target - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/target

【Event.currentTarget - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget

【e.targetとe.currentTargetの違い | cly7796.net】
http://cly7796.net/wp/javascript/e-target-and-e-current-target/

投稿2020/06/10 13:30