[英]Trigger HTML5 download using jQuery or Javascript
I expected the buttong at the HTML code to download the image that is downloading the anchor when pressed. 我希望HTML代码上的buttong可以下载在按下时正在下载锚点的图像。
$('.foo').on('click', function() { $('a').trigger('click'); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button>
you need to call click
on the dom element. 您需要调用
click
dom元素。
$('.foo').on('click', function() { $('a')[0].click(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button>
As well documented in triggering-event-handlers : 在触发事件处理程序中也有详细记录 :
jQuery's event handling system is a layer on top of native browser events.
jQuery的事件处理系统是本机浏览器事件之上的一层。 When an event handler is added using .on( "click", function() {...} ), it can be triggered using jQuery's .trigger( "click" ) because jQuery stores a reference to that handler when it is originally added.
使用.on(“ click”,function(){...})添加事件处理程序时,可以使用jQuery的.trigger(“ click”)触发事件处理程序,因为jQuery在最初添加该处理程序时会存储对该处理程序的引用。 Additionally, it will trigger the JavaScript inside the onclick attribute.
此外,它将触发onclick属性内的JavaScript。 The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag.
.trigger()函数不能用于模仿本机浏览器事件,例如单击文件输入框或锚标记。 This is because, there is no event handler attached using jQuery's event system that corresponds to these events.
这是因为,没有使用与这些事件相对应的jQuery事件系统附加事件处理程序。
From this: 由此:
How can I mimic a native browser event, if not .trigger()?
如果不是.trigger(),我如何模仿本机浏览器事件? In order to trigger a native browser event, you have to use document.createEventObject for < IE9 and document.createEvent for all other browsers.
为了触发本机浏览器事件,必须对<IE9使用document.createEventObject,对于所有其他浏览器都必须使用document.createEvent。 Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box.
使用这两个API,您可以以编程方式创建一个事件,其行为就像某人实际上单击了文件输入框一样。 The default action will happen, and the browse file dialog will display.
将执行默认操作,并显示浏览文件对话框。
The jQuery UI Team created jquery.simulate.js in order to simplify triggering a native browser event for use in their automated testing.
jQuery UI团队创建了jquery.simulate.js,以简化触发本地浏览器事件以用于其自动化测试的过程。 Its usage is modeled after jQuery's trigger.
它的用法是在jQuery触发之后建模的。
This jQuery project is no more active, but, in any case, it's very interesting. 这个jQuery项目不再活跃,但是无论如何,它非常有趣。
Therefore: 因此:
$(function () { $('.foo').on('click', function() { $('a').simulate('click'); }) });
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdn.rawgit.com/jquery/jquery-simulate/master/jquery.simulate.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.