jQueryを使ったファイルの動的ダウンロードがしたい

実現したいこと

jQueryを使ったファイルの動的ダウンロードがしたいです。

発生している問題

下のコードの関数hoge()と関数fuga()が僕の書いた動的ダウンロードをする関数です。
どちらもFOOOO.txtという名前でYOOOO!!!という中身のテキストファイルのダウンロードを意図しています。
hoge()とfuga()はそれぞれjQueryと素のJavaScriptを使って書いています。

このHTMLを開き、(コンソールから)関数fuga()を呼び出すと目的のファイルが正常にダウンロードされますが、関数hoge()を呼び出しても何もダウンロードされません。
また、hoge()を呼び出した時もfuga()を呼び出した時もコンソールにエラーは表示されていません。
実行環境はMacのGoogle Chromeです。

関数hoge()は何が間違っているのでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title></title>
6  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7</head>
8<body>
9
10  <script language="javascript" type="text/javascript">
11  function hoge() {
12      var blob = new Blob(['YOOOO!!!'], { "type": "text/plain" })
13
14      let link = $("<a></a>")
15      link.attr("href", window.URL.createObjectURL(blob))
16      link.attr("download", "FOOOO.txt")
17      link.click()
18  }
19
20  function fuga() {
21      var blob = new Blob(['YOOOO!!!'], { "type": "text/plain" })
22
23      let link = document.createElement('a');
24      link.href = window.URL.createObjectURL(blob);
25      link.download = "FOOOO.txt"
26      link.click()
27  }
28  </script>
29  
30</body>
31</html>