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单击和跟随功能未被调用的主要内容,如果未能解决你的问题,请参考以下文章