jQueryの関数に引数を渡すとプロパティエラーになる

Question

前提

コードのリファクターの際におきたエラーです。
初歩的なエラーかもしれませんが、回答いただけると嬉しいです。
以下のjQueryのコードですが、関数に引数を渡そうとするとエラーが出てしまいます。

エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading '0')

該当のソースコード

<label>ファイルを選択
<input type="file" name="file"　 class="upload-1">
</label>
<p class="js-upload-filename-1">ファイルを選択されていません</p>

$('.upload-1').on('change',file1('.js-upload-filename-1'))//引数を渡したい

 function file1(target) {
    var file = $(this).prop('files')[0];//エラーがでてしまう
    $(target).text(file.name);
};

エラーがでない例

$('.upload-1').on('change', function() {
    var file = $(this).prop('files')[0];
    $('.js-upload-filename-1').text(file.name);
});

上記のエラーがでないコードをリファクターして使いまわすには関数化したいのですが、うまくいかず。。。
スコープが原因かなと思ったのですが、その辺の知識が乏しいので回答いただけると幸いです・・・！

Answer 1

bind() してやればよいですね。

const upload1 = $('.upload-1');
upload1.on('change', file1.bind(upload1[0], '.js-upload-filename-1'));

---

もし <input type="file"> と js-upload-filename-1 のような要素の組が複数必要なら、イベントハンドラに引数を与えられるようにするよりは、属性や要素の構造で紐付けを行ったほうがよいかもしれません。

<input type="file" name="file" class="upload" data-target=".js-upload-filename-1">
<p class="js-upload-filename-1">ファイルを選択されていません</p>
<input type="file" name="file" class="upload" data-target=".js-upload-filename-2">
<p class="js-upload-filename-2">ファイルを選択されていません</p>

$('.upload').on('change', function() {
    $(this.dataset.target).text(this.files[0].name);
});

Comments

[maisumakun]

.upload-1が複数個あった場合には想定通り動かなさそうです。

[int32_t]

> .upload-1が複数個あった場合には想定通り動かなさそうです。

ごもっともですね。

[yunosuke]

なんとか解決できましたありがとうございます！

Answer 2

file1('.js-upload-filename-1')のように、普通に関数を呼ぶと、thisは何もセットされません。

というより、$('.upload-1').on('change',file1('.js-upload-filename-1'))のように書くと、file1('.js-upload-filename-1')を実行した結果をイベントハンドラとしてセットする、ということになってしまい、「file1という関数をハンドラとしてセットする」という意味に鳴りません。

「ハンドラにするための関数を返す関数を作る」などの、ちょっと複雑な構造を取る必要があります。

Comments

[yunosuke]

回答ありがとうございます。
やっぱりthisが原因だったんですね・・・

「ハンドラにするための関数を返す関数を作る」
というのはコールバック関数のようなものでしょうか！？