javascript jQuery .click() 在 Safari 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23497825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:00:00  来源:igfitidea点击:

jQuery .click() does not work in Safari

javascriptjquerysafari

提问by Magnanimity

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):

我在我的项目中使用http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/。它在所有浏览器中都能完美运行,除了在 Safari 中,“浏览”按钮不会打开文件对话框。script.js 中存在以下代码(包含在插件中):

$('#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 Safariand implemented

.click() 不会在 Safari 中触发。我已经按照jQuery尝试了该解决方案.click() 适用于每个浏览器,但 Safari并已实现

 $('#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?

但后来我得到的错误是dispatchEvent is not a function. 然后我对此做了一些研究,并尝试了 jQuery.noConflict() 路线,但这并没有解决错误。此外,我在主文件中使用了大量 jQuery,并且无法为整个页面激活 noConflict() 模式。也没有理由认为 jQuery 应该与任何东西发生冲突,因为我只使用 jQuery 和普通的 javascript,我没有使用原型或角度之类的东西。有人知道在 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.

更新:仅供参考,我alert('test')在提到的函数中添加了一个(在单击“浏览”时触发),并且我确实在 Safari 中收到了警报,但它并没有模拟文件输入元素的单击,即:它是不打开文件对话框。

采纳答案by Magnanimity

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

1)该方法不喜欢jQuery,所以代替

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

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

I assigned an ID to my file input and instead called

我为我的文件输入分配了一个 ID,而是调用了

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

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.

2) 如果输入是隐藏的 ( display:none;),Safari 会公然忽略这一点,实际上是这样,所以我将输入的 font-size = 1px; 和不透明度 = 0。

Implementing these two changes got the code working.

实现这两个更改使代码工作。

回答by T.J. Crowder

You need to read that answermore closely. :-)

您需要更仔细地阅读该答案。:-)

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

dispatchEvent是 DOM 元素上的函数,而不是 jQuery 对象。您正试图在 jQuery 对象上调用它。所以:

$('#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 undefinedif the jQuery object is empty.

使用[0]jQuery对象上给你的第一个DOM对象jQuery对象中,或者undefined如果jQuery对象是空的。