[IE11]input['file']でchangeイベントが発火しない

Question

掲題の通りIE11でchangeイベントが発火しないので
発火する方法を教えて頂けないでしょうか。

chromeでは正常に動きます。

<div>
 <input type="text">
 <a href="#" class="upload">画像選択</a>
 <input type="file" style="display:none;">
</div>

$('.upload').on('click', function() {

  $(this).next('input').trigger("click");
  $(this).next('input').on('change', function(){
    ～処理～
  });

});

また1回目では発火しませんが、2回目以降では発火します。
処理の中でconsole.logを仕込むと、1回ではなく複数回呼ばれているようです。

Answer 1

.nextは色々ﾒﾝﾄﾞｸｻｲ
inputにid入れたほうがﾒﾝﾄﾞｸｻｸないかも

Answer 2

イベントの設定箇所が間違っていると思います。
以下のように、file要素のchangeイベント設定を、外側で行うべきです。

$('.upload').on('click', function() {
  $(this).next('input').trigger("click");
});
$('input[type="file"]').on('change', function(){
   ～処理～
});

質問者様の書き方では、a要素をクリックした際にfile要素のclickイベントを発火しようとしていますが、この時点ではfile要素にclickイベントが設定されていません。
だから、1回目は発火しないのだと思います。
で、1回クリックするとfile要素にclickイベントが設定されるので、2回目は発火するのだと思います。
Chromeでうまく動く理由は分かりません....

Comments

[tomoyuki123]

ありがとうございました。
ただ、これでもうまくいかず、結局inputタグの中にonchangeを仕込んで解決しました。

[yuji38kwmt]

すみません、file要素取得のコードが間違っていたので修正しました。
$(this).next('input') ⇒ $('input[type="file"]')