jQuery Methods not working in Safari 6

Question

Pulling my hair out. Simple jQuery methods are not working in Safari 6.

The following code block works in all other browsers that I've tested except Safari 6. It works fine in Safari 5 and older, fine in Firefox, fine in IE. It also works fine in Chrome.

The alert does popup in Safari 6, so the function still fired, but nothing happens with any of the other 3 methods.

----- UPDATE ----- After further testing on several machines...I've found that it only fails to work in Safari 6 in Mac OSX 10.8. The code works fine in the same version of Safari in OSX 10.7. --------------------

I am running jQuery 1.8.3. and my page validates as 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');
    });
});

Answer 1

I could be wrong, but I think your problem is the form is submitting before your javascript is running. You may need to use preventDefault to keep that from happening. You could also change your button from a submit button to a type="button" and that could help as well. Oops...quick edit..I also put your alert in a callback so that it would run after the fadeIN had happened...you could leave that or change it.

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

    });
});

Answer 2

You can use .submit() evnet (Instead of click). $('form').bind('submit',function(){...Code...});
But because you are trying to upload a file, I'd recommand using some ajax techniques, and or a jquery plugin.
There are many nice tutorials on file uploading using ajax (Use google)
And here is one from Nettuts+ ajax file uploading which I like.