Jquery Draggable/Sortable 并以编程方式单击输入[文件]

Question

我在使用 JQuery 可拖动和可排序插件时遇到一个奇怪的错误。

我有一个可添加到可排序容器的可拖动对象列表。

页面的功能是能够将内容（可拖动）添加到页面（可排序）并能够在之后对其进行排序。 我可以添加多种类型的内容，例如文本、图形、表格和文件（例如图像）...

当他将图像对象放入可排序容器时，我希望用户 select 从他的计算机上传一个文件。因此，我在放置结束时在输入文件上模拟了一个 "click"（由于可拖动和可排序已连接，这发生在可排序的 "update" 事件中）。 但我不知道为什么，输入文件的点击事件确实被触发了（我用console.log()检查过）但是"select file" window从未打开过。

如果我在 firebug 控制台中键入我的 $('#upl input').click();，它会起作用...如果我在第三个 link 中触发点击事件，它会起作用。但是当 "click" 在可排序容器的更新事件中时， window 就不会出现。我什至尝试使用 setTimeOut 延迟点击以等待更新事件结束，但点击事件仍然被触发但没有 window...

有人遇到过这个问题吗？

这里是我在 jsfiddle 上的问题的简化。 https://jsfiddle.net/jp51cadt/3/ 您可以将 "Image" 放到正方形中。它会触发下方输入的点击，但上传 window 不会显示。

function updateSortable(event, $ui) {
     $('#upl input').on("click", function() {
         alert("this works");
     });
     $('#upl input').click(); // not this
 } 

我添加了提示以显示已触发点击...

Answer 1

基本上，这在浏览器和版本之间的工作方式不同，因为以编程方式单击 输入文件 被认为存在安全风险。

有些浏览器允许它，有些对其施加限制，有些则不允许。在大多数情况下，如果 输入文件 未被隐藏，并且导致点击的事件来自 用户操作上下文 （即用户驱动）将被允许。

在您的示例中，点击不是用户驱动的 - 因此 Chrome 不允许。但是，如果您将其更改为用户驱动的事件，例如 mouseup，它将起作用。

您必须确定最适合您的情况。我 updated your fiddle 提供了一个简单的工作示例 click()，但它可能会更明确一些。