jQuery Click and following関数が呼び出されない

Question

以下のコードはChromeとFirefoxでは動作しますが、Edgeでは動作しません。

ボタンをクリックすると、ユーザーが添付ファイルをアップロードできるように、入力ファイルをプログラムでクリックする必要があります。

ユーザーが添付ファイルを選択すると、ファイルの変更が検出され、Ajaxコールを使用してアップロードされます。

のjQuery：

jQuery(document).ready(function(){ 
     jQuery(document).on("click",".upload-btn",function(){ 
      jQuery(document).find(".upload").click(); 
      watchCoveringLetterUpload(); 
     }); 
    }); 

    function watchCoveringLetterUpload() { 
    var target = jQuery(document).find(".upload"); 
    var textType = /text.*/; 
    target.change(function(e) { 
     console.log(e) 

}) 
} 

https://jsfiddle.net/sv3oougf/ ----元のコード

https://jsfiddle.net/sv3oougf/1/ ----自己呼び出し機能

でテストにconsole.logを確認してください、呼び出された関数ではありませんIEで実行されますが、Chromeで実行されます。

Answer 1

入力タイプの参照にクラスを使用する代わりに、idを使用するとうまくいきます。

このコードはIEのエッジのようなものはありませんエッジで

(function() { 
 

 

 
     function watchCoveringLetterUpload() { 
 
      console.log("function is called"); 
 
      var target = jQuery(document).find("#upload"); 
 
      var textType = /text.*/; 
 
      target.change(function(e) { 
 
       console.log(e) 
 
       file = target[0].files[0]; 
 
       console.log("file", file); 
 
      }); 
 
     } 
 

 
     jQuery(document).ready(function() { 
 
      jQuery(document).on("click", ".upload-btn", function() { 
 
       jQuery(document).find("#upload").click(); 
 
       watchCoveringLetterUpload(); 
 
      }); 
 
     }); 
 

 
    })(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<input type="file" style="display:none" id="upload"> 
 
<button class="upload-btn">Click</button>