输入文件，单击“不工作”.没有事件

Input file, click no working.. No event

本文关键字：不工作 事件 工作 文件 单击 输入      更新时间：2023-09-26

我遇到问题，生成了一个输入文件类型，点击事件不起作用。HTML中的输入生成可以在本地单击，或者在jquery上单击事件或更多。但当我尝试。。

$('body').append('<input type="file" id="asd" />')

这些工作，甚至是在本机上点击，似乎都不起作用，但似乎没有任何事件。

document.getElementById('asd').click()
$('#asd').click()
document.getElementById('asd').dispatchEvent(new Event('click'));

这可能正在发生？它在Chrome或Firefox中不起作用。。。

即使在Stackoverflow中运行这些命令，这也不起作用，所以它不能是…

对不起我的英语。

如果没有用户操作，就不可能模拟文件输入点击事件。如果你想隐藏文件输入，那么你必须添加一个按钮供用户点击。在它的点击事件中，您应该模拟文件输入的点击事件。换句话说，如果你试图从浏览器不信任的事件中触发文件输入点击，那么点击就不会起作用。检查此问题及其答案。触发器点击输入=异步ajax上的文件done（）

$('body').append("<input style='visibility:hidden;' type='file' id='asd'/><button id='trigger'>trigger file input</button>")
$('#trigger').on('click',function(){$('#asd').click()});
#trigger{
background:red;
  color:white;
  padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

问题是第二个"input"元素是动态添加的，点击绑定发生在第二个"input"元素存在之前。这就是为什么它对它没有影响。你可以在插入它之前将处理程序附加到每个锚上。

尝试使用此代码绑定您的点击事件：

$('body').on('click', '#ads', function(e){
    ...
});

顺便说一句，给你的输入元素一个类名更好，并用类似".class"的类名绑定点击事件

出于安全考虑，在没有任何用户交互的情况下，无法自动点击文件输入。如果一个页面在加载页面时自己激活了任何东西，那将是非常糟糕的。

您可以使用label点击用户输入的文件，如下所示。

$('body').append('<input type="file" id="asd" /><label for="asd">Click</label>');

如果不调用以下点击事件，就无法点击附加的元素：

$(document).on('click', '#asd', function() {
      // This will work!
});
相关文章：