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

Question

我在使用 JQuery Draggable 和 Sortable 插件时遇到了一个奇怪的错误。

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

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

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

如果我在萤火虫控制台中输入我的$('#upl input').click();，它会起作用...如果我在第三个链接中触发点击事件，它会起作用。但是当“点击”在可排序容器的更新事件中时，窗口就不会出现。我什至尝试使用 setTimeOut 延迟单击以等待更新事件结束，但是仍然触发了单击事件但没有窗口...

有人遇到过这个问题吗？

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

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() 的简单示例，但它可能会更明确一点。