jQuery 方法在 Safari 6 中不起作用答案

【问题标题】：jQuery Methods not working in Safari 6jQuery 方法在 Safari 6 中不起作用
【发布时间】：2012-12-17 17:41:29
【问题描述】：

拔掉我的头发。简单的 jQuery 方法在 Safari 6 中不起作用。

以下代码块适用于我测试过的所有其他浏览器，除了 Safari 6。它在 Safari 5 和更早版本中运行良好，在 Firefox 中运行良好，在 IE 中运行良好。它在 Chrome 中也可以正常工作。

在 Safari 6 中确实会弹出警报，因此该函数仍然被触发，但其他 3 种方法中的任何一个都没有发生任何事情。

----- 更新 ----- 在几台机器上进一步测试后......我发现它只能在 Mac OSX 10.8 的 Safari 6 中工作。该代码在 OSX 10.7 中相同版本的 Safari 中运行良好。 --------------------

我正在运行 jQuery 1.8.3。我的页面验证为 HTML5。

HTML：

<div id="fileUploadFormContainer">

    <form id="fileUploadForm" action="/upload/do_upload/<?=$row->project_id?>" method="post" enctype="multipart/form-data" >
        <fieldset>
        <label for="userfile">Attach a file</label>
            <input type="file" name="userfile" id="userfile" /><br />
            <input type="submit" id="fileUploadSubmit" value="Upload file" />
            <img class="loadingBar" id="fileUploadLoadingBar" src="/images/indicators/ajax-loader.gif" alt="" />
        </fieldset>
    </form>
</div><!-- end fileUploadFormContainer -->

CSS：

.loadingBar {
    display: none;
}

JavaScript：

$(function(){
    // Submit Buttons
    $('#fileUploadSubmit').click(function()
    {
        $('#fileUploadSubmit').attr('value', 'Uploading');
        $('#fileUploadSubmit').fadeTo('fast',0.6);
        $('#fileUploadLoadingBar').fadeIn('fast');
        alert('Finished');
    });
});

【问题讨论】：

我在这些行中看到的唯一奇怪的是$(...).attr('value', 'Uploading');。通常你会使用$(...).val('Uploading');（或者你可以使用prop）。但我敢打赌attr 无论如何都可以工作，无论如何，这并不能解释褪色......
很高兴看到新 SO 成员提出的问得好的问题。不错！
页面加载后或单击按钮后未报告 javascript 错误。
使用输入类型button而不是submit怎么样？因为那样它在我的 Safari 6.0.2 上运行良好。如果您不停止提交，则提交类型会重定向您。我还从 google 获取了 jQuery：developers.google.com/speed/libraries/devguide#jquery
@n0oitaf 是的......我也明白了。如果我将 html 输入类型从“提交”更改为“按钮”，那么我的 jQuery 将按预期工作。但这是有趣的部分。显然我的表单现在没有提交……所以我在函数的末尾添加了$('#fileUploadForm').submit();，现在表单提交了……但是问题又回来了，其余的方法都不起作用。奇怪！

标签： jquery safari safari6

【解决方案1】：

我可能是错的，但我认为您的问题是表单在您的 javascript 运行之前提交。您可能需要使用 preventDefault 来防止这种情况发生。您还可以将按钮从提交按钮更改为 type="button"，这也有帮助。哎呀...快速编辑..我还将您的警报放在回调中，以便它在 fadeIN 发生后运行...您可以保留或更改它。

$(function(){
    // Submit Buttons
    $('#fileUploadSubmit').click(function(e)
    {
        e.preventDefault();
        $('#fileUploadSubmit').attr('value', 'Uploading');
        $('#fileUploadSubmit').fadeTo('fast',0.6);
        $('#fileUploadLoadingBar').fadeIn('fast', function() {
            alert('Finished');
        });

    });
});

【讨论】：

感谢您的建议。刚试了一下，不幸的是它没有解决问题。由于这只发生在 OSX 10.8 中，并且在我尝试了一切之后，我开始认为这可能与操作系统或 Safari 的这个特定版本有关？
没问题...这很奇怪。它在 Safari 6.0.2 (10.8.2) 中也不适合我，但是通过我所做的修改，它工作正常......当然需要添加更多代码才能提交表单（或使用 .submit 而不是 .click)，或者执行下一步中的任何操作，但这确实解决了方法（效果）未运行的问题。
如果我将输入类型从“提交”更改为“按钮”，那么我的 jQuery 也可以按预期工作。但这里是转折点。一旦我将$('#fileUploadForm').submit(); 添加到我的函数末尾，表单现在将提交......但问题又回来了，其余方法不起作用。奇怪！
这听起来好像与诚实的时机有关。也许需要在回调中进行某些操作，以便它在预期时执行。这令人困惑。

【解决方案2】：

您可以使用 .submit() evnet（而不是单击）。 $('form').bind('submit',function(){...代码...});
但是因为您正在尝试上传文件，所以我建议您使用一些 ajax 技术和/或 jquery 插件。
有很多关于使用 ajax 上传文件的好教程（使用 google）
这是来自Nettuts+ ajax file uploading 的一张我喜欢的。

【讨论】：

谢谢...我已经尝试过了。它仍然无法在 OSX 10.8 的 Safari 6 中运行。我已将我的功能更改为$('#fileUploadForm').bind('submit',function() { $('#fileUploadSubmit').attr('value', 'Uploading'); $('#fileUploadSubmit').fadeTo('fast', 0.6); $('#fileUploadLoadingBar').fadeIn('fast'); });