jQuery find()で取得したエレメントで.trigger()を呼び出せない

Question

chrome dev toolのコンソールには下記のようなエラー出ます。

Uncaught TypeError: inputForm.trigger is not a function

◆元のコード

var inputForm = $(this).find('input[type="file"]')[0];
inputForm.trigger('change');

◆下のケースでは正しく動作する。

var inputForm = $(this).find('input[type="file"]')[0];
$('#upload_file').trigger('change');

ID要素名を直接、文字列で指定するとエラーが起きません。なぜでしょうか？

Answer 1

「[0]」しちゃダメです。これはget(0)と同じでDOM要素を保持します。
jQueryオブジェクトからメソッドを利用するならeq(0)とかにしてください

Answer 2

$(this).find('input[type="file"]')[0]のように参照すると、取れるものはjQueryオブジェクトではなく、生のDOMオブジェクトとなってしまいます。こちらにtriggerはありません。

DOMで正式にイベントを起こすのは面倒なので、$(inputForm).trigger('change');とjQueryオブジェクトに入れてからtriggerを行いましょう。

Comments

[geikusoo]

自分はjQueryオブジェクトとDOMオブジェクトの違いが分かっていませんでした。
ありがとうございます！