javascript - calling click event of input doesn't work in Safari - Stack Overflow

admin管理员组

文章数量:1291324

I have a input, type of file, with display:none and there is a button. after clicking the button, the input's event should be fired. In IE, Chrome and Firefox it works but not in Safari!

var elem=$('<input id="ajxAttachFiles" name="fileUpload" type="file" style="display: none;"/>');
    if($("#ajxAttachFiles").length==0){
        elem.prependTo(".ChProgress");
    }
$("#ajxAttachFiles").click();

there is no error in console. I tried this but nothing.

$(document).ready(function(){
        $("#btn").on('click',function(){
          $("#ajxAttachFiles")[0].click();
        });
});

<script src=".10.1/jquery.min.js"></script>
<input id="ajxAttachFiles" type="file" style="display:none;">
<button id="btn" type="button">Click me!</button>


   

I have a input, type of file, with display:none and there is a button. after clicking the button, the input's event should be fired. In IE, Chrome and Firefox it works but not in Safari!

var elem=$('<input id="ajxAttachFiles" name="fileUpload" type="file" style="display: none;"/>');
    if($("#ajxAttachFiles").length==0){
        elem.prependTo(".ChProgress");
    }
$("#ajxAttachFiles").click();

there is no error in console. I tried this but nothing.

$(document).ready(function(){
        $("#btn").on('click',function(){
          $("#ajxAttachFiles")[0].click();
        });
});

<script src="https://ajax.googleapis./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>


   

• javascript
• jquery
• html
• safari

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Oct 22, 2014 at 6:05 Super HornetSuper Hornet 2,90755 gold badges3030 silver badges5858 bronze badges 7

• Which build of Safari are you using? – Wottensprels Commented Oct 22, 2014 at 6:09
• @Sprottenwels 5.1.7(7534.57.2) – Super Hornet Commented Oct 22, 2014 at 6:10
• Does it work if you don't hide it with display: none? – dfsq Commented Oct 22, 2014 at 6:10
• @dfsq I just tested. no difference – Super Hornet Commented Oct 22, 2014 at 6:13
• 2 Click event in safari on input type file will work if it is not hidden and click() is called out of user interaction (e.g inside onclick handler etc). – Amitesh Commented Oct 22, 2014 at 6:31

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

The issue is pletely solved. The point is element of input[type=file] must not be display: none. Look at sample below:

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>

Trigger the click event on the DOM element rather than the jQuery object. That should work in all browsers.

 $('#ajxAttachFiles')[0].click();

Or:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ChProgress">Will be added here</div>

本文标签： javascriptcalling click event of input doesn39t work in SafariStack Overflow