Question

我有一个隐藏的输入元素（Dropzone），它写在原始html的正文中（未附加）。

<div style="display: none;">
    <form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone"></form>
</div>

现在在我的.js脚本中，我正在尝试：

 $(function() {
      $('#uploadProfileDropzone').click()
 })

什么也没发生。但是，如果我在Chrome的控制台中调用$('#uploadProfileDropzone').click()，则可以正常工作。

可能是什么问题？

编辑：

问题可能是我试图在我的Dropzone初始化之前调用该函数。有什么办法知道什么时候发生的吗？

但是，即使尝试：

$(function() {
    setTimeout(function() {
         $('#uploadProfileDropzone').click() 
    }, 5000)
})

页面完全加载后还有很多时间，但仍然没有任何反应

解决方案：

事实证明，某些（或大多数）浏览器会阻止此类活动。显而易见，为什么现在回头看。我的意图是导航到一个页面，该页面一旦准备好，就会打开一个文件对话框，用于执行配置文件上传操作。从用户体验的角度来看，阻止此类操作似乎在逻辑上是正确的，因为它可能导致垃圾邮件和网站的不良活动。我通过在加载时显示一个简单的弹出框来解决该问题，该弹出框迫使用户按下按钮，然后依次调用$('#uploadProfileDropzone').click()。

Answer 1

您可能有两个选择：

1）以编程方式创建您的放置区

Dropzone.autoDiscover = false;
let csvDropzone = new Dropzone("#uploadProfileDropzone", {
  paramName: "file",
  init: function() {
      $('#uploadProfileDropzone').click();
  }
});

<div style="display: none;">
    <form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone">
    </form>
</div>

2）您可以尝试直接使用init配置方法，而无需在JS代码中初始化放置区：

// Taken from the dropzone config page
Dropzone.options.uploadProfileDropzone = {
  init: function() {
      $('#uploadProfileDropzone').click();
  }
};

Answer 2

事实证明，某些（或大多数）浏览器会阻止此类活动。显而易见，为什么现在回头看。我的意图是导航到一个页面，该页面一旦准备好，就会打开一个文件对话框，用于执行配置文件上传操作。从用户体验的角度来看，阻止此类操作似乎在逻辑上是正确的，因为它可能导致垃圾邮件和网站的不良活动。我通过在加载时显示一个简单的弹出框来解决该问题，该弹出框迫使用户按下按钮，然后依次调用$('#uploadProfileDropzone').click()。

Answer 3

您应该使用文档就绪事件（元素初始化后代码才能工作）

$(document).ready(function(){
     $('#uploadProfileDropzone').click(function(){
        // Do something here
    });
});

OR

$('#uploadProfileDropzone').on('click',function(){ write your code here });

$（element）.click（）即使在$（function（）{}）内部也不会触发

3 个答案: