jQuery单击和跟随功能未被调用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery单击和跟随功能未被调用相关的知识,希望对你有一定的参考价值。

以下代码适用于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中执行。

答案

使用id而不是使用类来引用输入类型,它将起作用。

检查此代码在边缘测试

  (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>

以上是关于jQuery单击和跟随功能未被调用的主要内容,如果未能解决你的问题,请参考以下文章

26个jQuery代码片段使用技巧

Jersey ExceptionMapper未被调用

ListFragment OnListItemClick 未被调用

jquery 确认和退出功能

jQuery特效 | 导航底部横线跟随鼠标缓动

SPFx JQuery Dialog 按钮单击未找到公共功能