Question

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

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

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

当他将图像对象放入可排序容器时，我希望用户从他的计算机中选择要上载的文件。因此，我在删除结束时模拟输入文件上的“单击”（因为可拖动和可排序的连接，这发生在可排序的“更新”事件中）。但我不知道为什么，输入文件的click事件会被触发（我用console.log（）检查）但是“select file”窗口永远不会打开。

如果我输入我的$（'＃upl input'）。click（）;在firebug控制台中，它有效...如果我在第三个链接中触发click事件，它就可以工作。但是当“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()的快速示例，但它可能会更加明确。

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

1 个答案: