javascript - MVC ActionResult がファイルのダウンロードを呼び出したときに、マウスアップ時に壊れた画像が表示される

Question

私は元々、マウスアップとマウスダウンに基づいて src を変更し、クリックすると押し下げられたように見え、クリック音が鳴るボタンを作成しました。MVCアクションを介してPDFダウンロードを強制しようとするまで、これはうまくいきました。この猫の皮を剥ぐ方法はいくつか試しましたが、mouseup 関数を使用してウィンドウの場所を PDF ダウンロード アクションに設定し、必要なファイル ダウンロード パス情報を渡すことにしました。ボタンをクリックすると（マウスダウンが正しく実行されます）、マウスアップでクリック音が正しく再生され、必要に応じてpdfファイルがダウンロードされますが、ボタンの画像が壊れているように見えます。

最初にページを読み込んで、ボタンがまだクリックされていないとき、画像は想定どおりに見えます。次に、マウスアップを実行すると壊れます（Chromeを使用するか、IEとSafariで消えたり、文字化けしたりします）が、ソースを調べると、src属性が同一であるように見えるため、srcが同じ場合に壊れた画像を返す理由がわかりません以前のように。

コード-

jquery を表示:

var audio = document.getElementsByTagName("audio")[0];

    $('#MAAX-DGB-Button').mouseup(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB.png');
        audio.play();

        var pdfDownload = '/Locator/ForcePDFDownload?PDFURL=<file location info>';
        window.location = pdfDownload;
    });
    $('#MAAX-DGB-Button').mousedown(function () {
        $(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB_press.png');
    });

HTML を表示:

<img src="../../Content/Images/AdLandingViews/MAAX-DGB.png" alt="Download MAAX Collection Brochure" id="MAAX-DGB-Button" />

ForcePDFDownload MVC アクション:

public ActionResult ForcePDFDownload(string PDFURL)
    {
        string path = @"\\<server location>\" + PDFURL;
        string filename = Path.GetFileName(PDFURL);
        Response.AppendHeader("Content-Disposition", "attachment; filename=" + filename);
        return File(path, "application/pdf");
    }

https://maaxspasportal.com/Locator/AdLandingLocate/MAAXCollectionでコードをテストでき ますが、「ダウンロードグリーンパンフレット」ボタン。

テスト済みブラウザ:

Chrome バージョン 28.0.1500.95 - 画像が壊れているように見える。

IE 10 - 画像が消えたり、文字化けしたりします。

Safari 6.0.5 - 画像が消えます。

FireFox 22.0 - 動作します!

これが正しく機能するように助けてくれてありがとう。