Question

我遇到问题，生成输入文件类型，点击事件不起作用。 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中运行这些命令也不行，所以它不能......

抱歉我的英文。

Answer 1

无法在没有用户操作的情况下模拟文件输入点击事件。如果要隐藏文件输入，则必须添加一个按钮供用户单击。在其单击事件中，您应该模拟文件输入的单击事件。换句话说，如果您尝试从event which is not trusted by the browser触发文件输入单击，则单击将不起作用。检查这个问题及其答案。 Trigger click on input=file on asynchronous ajax done()

＆＃13;

$('body').append("<input style='visibility:hidden;' type='file' id='asd'/><button id='trigger'>trigger file input</button>")

$('#trigger').on('click',function(){$('#asd').click()});

＆＃13;

#trigger{
background:red;
  color:white;
  padding:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

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

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

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

顺便说一句，给你的输入元素一个类名更好，并将click事件与类名绑定，例如＆＃39; .class＆＃39;

Answer 3

由于安全目的，无法在没有任何用户交互的情况下自动点击文件输入。如果页面在页面加载时激活任何内容，那将非常糟糕。

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

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

Answer 4

你不能点击附加元素而不像这样调用点击事件：

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

输入文件，点击不工作..没有事件

4 个答案: