jquery - jQuery を使用して動的に作成された要素を選択する

Question

これを理解しようとしていますが、問題はわかっていると思いますが、修正方法がわかりません。ページが最初に読み込まれるとき、JSON ファイルを使用してページにいくつかのリンクを提供し、$.getJSON を使用してリンクを作成し、動的に ID を付与します。そのための私のコードは次のとおりです（これは今のところ私が興味を持っているほんの少しです。もちろん、関数を閉じます）：

    $(function() {

        $.getJSON("data.json", function(data) {
            var navOutput = "";
            for (var key in data.navigation) {
                navOutput += '<li><a id="' + key + '">' + data.navigation[key] + '</a></li>'; // Create list items with ID 'key'
            }
            $("#mainNav").html(navOutput);

すべてがページに正常に読み込まれます。$.getJSON 関数の外で、例として、動的に作成された ID の 1 つにイベント リスナーを割り当てようとしています。

$("#cast").click(function() {
    alert("Testing");
}); //click function

これはうまくいかないようです。これにはおそらく簡単な答えがありますが、私にはわかりません。HTML で作成されたページの ID にイベント ハンドラーを割り当てると機能するため、これらの動的 ID と関係があります。どんな助けでも大歓迎です。