jQuery .click() does not work in Safari

Question

I have seen several similar posts with solutions that seemed to have worked for those people, but I CANNOT get this to work.

I am using http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/ in my project. It works PERFECTLY, in all browsers, except in Safari the "BROWSE" button does not open a file dialog. The following code exists in script.js (which is included for the plugin to work):

$('#drop a').click(function(){
    // Simulate a click on the file input button
    // to show the file browser dialog
    $(this).parent().find('input').click();
});

The .click() does not fire in Safari. I have tried the solution as per jQuery .click() works on every browser but Safari and implemented

 $('#drop a').click(function(){
    var a = $(this).parent().find('input');
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window);
    a.dispatchEvent(evObj);
});

But then I get the error that dispatchEvent is not a function. I then did some research on this, and tried the jQuery.noConflict() route, but this did not resolve the error. Also, I use a LOT of jQuery in my main file and I cannot have the noConflict() mode activated for the entire page. There is also no reason that the jQuery should be conflicting with anything as I am only using jQuery and normal javascript and I am not using anything like prototype or angular. Does anybody know of another way to simulate a click in Safari?

UPDATE: Just FYI, I have added an alert('test') in the mentioned function (which triggers when "BROWSE" is clicked), and I do get the alert in Safari, but it is not simulating the click of the file input element, i.e: it is not openening the file dialog.

@sudharsan: On a jQuery object, `.trigger("click")` and `.click()` are the same thing. — T.J. Crowder, May 06 '14 at 14:46
@jalynn2, I no longer get the `dispatchEvent is not a function` error in Firefox and it works, but it is still doing nothing in Safari. Not sure where to go from here in terms of debuggin in Safari... @T.J. Crowder, I have submitted a comment to your answer. — Magnanimity, May 06 '14 at 15:00
Just FYI, I have added an `alert('test')` in the mentioned function (which triggers when "BROWSE" is clicked), and I do get the alert in Safari, but it is not simulating the click of the file input element, i.e: it is not openening the file dialog. — Magnanimity, May 06 '14 at 15:02
I finally figured out that the click() call would work if I called it closer to the user click event or tap on the screen. If I first sent a packet to the server for validation and then called click() when it returned, then it wouldn't work. I have to change my logic or flow. — Martin Lottering, Sep 26 '15 at 08:24

score 5 · Accepted Answer · answered May 07 '14 at 15:15

The second section of code in my original question turned out to work, except for 2 things.

1) The method does not like jQuery, so instead of

var a = $(this).parent().find('input')[0];

I assigned an ID to my file input and instead called

var a = document.getElementById('upload_select');

2) Safari blatantly ignores this if the input is hidden (display:none;), which is was, so instead I made the input font-size = 1px; and opacity = 0.

Implementing these two changes got the code working.

score 2 · Answer 2 · edited May 23 '17 at 10:30

2

You need to read that answer more closely. :-)

dispatchEvent is a function on the DOM element, not the jQuery object. You're trying to call it on the jQuery object. So:

$('#drop a').click(function(){
    var a = $(this).parent().find('input')[0];
    // Change here -----------------------^^^
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window);
    a.dispatchEvent(evObj);
});

Using the [0] on the jQuery object gives you the first DOM object in the jQuery object, or undefined if the jQuery object is empty.

edited May 23 '17 at 10:30

Community

1
1

answered May 06 '14 at 14:48

T.J. Crowder

1,031,962
187
1,923
1,875

Ok, I thought that was because the jQuery was retrieving an array and they wanted to reference the first element that was retrieved. I am now no longer getting the `dispatchEvent is not a function` error in Firefox (and it works), but it is still not working in Safari. It just does nothing. I don't normally use Safari, so I am unsure where to go from here in terms of debugging for Safari... – Magnanimity May 06 '14 at 14:59
@Magnanimity: It may just not be possible with the current Safari. [This answer](http://stackoverflow.com/a/210709/157247) from tvanfossen suggests your original thing worked for him in Safari, and he usually knows what he's doing. If that doesn't do it, there's an [interesting workaround here](http://stackoverflow.com/a/3030174/157247). It's a workaround rather than "solution" but quite a good one. – T.J. Crowder May 06 '14 at 15:35

jQuery .click() does not work in Safari

2 Answers2

Linked