调用输入的单击事件在Safari中不起作用
调用输入的单击事件在Safari中不起作用
提问于 2014-10-22 14:05:19
我有一个输入，类型的文件，与display:none和有一个按钮。单击该按钮后，应该会触发输入的事件。在IE，Chrome和Firefox中它可以工作，但在Safari中不能！
var elem=$('<input id="ajxAttachFiles" name="fileUpload" type="file" style="display: none;"/>');
if($("#ajxAttachFiles").length==0){
elem.prependTo(".ChProgress");
}
$("#ajxAttachFiles").click();控制台中没有错误。我试过this，但是什么都没有。
$(document).ready(function(){
$("#btn").on('click',function(){
$("#ajxAttachFiles")[0].click();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input id="ajxAttachFiles" type="file" style="display:none;">
<button id="btn" type="button">Click me!</button>
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-10-25 15:55:47
这个问题已经完全解决了。要点是input[type=file]的元素不能为display: none。请看以下示例：
function click(el) {
// Simulate click on the element.
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
}
document.querySelector('#selectFile').addEventListener('click', function(e) {
var fileInput = document.querySelector('#inputFile');
//click(fileInput); // Simulate the click with a custom event.
fileInput.click(); // Or, use the native click() of the file input.
}, false);<input id="inputFile" type="file" name="file" style="visibility:hidden; width:0; height:0">
<button id="selectFile">Select</button>
Stack Overflow用户
发布于 2014-10-22 14:23:02
在DOM元素而不是jQuery对象上触发单击事件。这应该可以在所有浏览器中工作。
$('#ajxAttachFiles')[0].click();或者：
document.getElementById('ajxAttachFiles').dispatchEvent( new Event('click') );
//for IE < 9 use microsoft's document.createEventObject
var elem=$('<input id="ajxAttachFiles" name="fileUpload" type="file" style="display: none;"/>');
if($("#ajxAttachFiles").length==0){
elem.prependTo(".ChProgress");
}
$("#ajxAttachFiles").on('click',function() {
alert( 'click triggered' );
});
$("#ajxAttachFiles")[0].click();
//an alternative:
var event = new Event('click');
document.getElementById('ajxAttachFiles').dispatchEvent(event);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ChProgress">Will be added here</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26501221
复制相关文章
相似问题
腾讯云开发者
