javascript - DOM に新しい要素を追加した後に関数をリロードする方法

Question

アプリのプロファイルの +Follow 機能に取り組んでいます。フォロー機能は (新しいページの読み込み時に) 1 回だけ機能しますが、スクリプトが DOM 要素を置き換えた後は機能しません。

ユーザーがプロファイルをフォローしていない場合の HTML 出力:

<div id="follow">
    <a>Follow profile</a>
</div>

HTML 出力 プロファイルが現在ユーザーによってフォローされている場合:

<div id="unfollow">
    <a>Unfollow profile</a>
</div>

jQuery で魔法が起こります。次の関数は関数にラップされてい$(document).ready()ます。

function follow() {

    $("#follow a").on("click", function() {
        // $.getJSON fn here that follows profile and returns success T/F
        if ( success ) {
            $("#follow").remove();
            $("#follow-container").html('<div id="unfollow"><a>Unfollow profile</a></div>');
        }
    });

    $("#unfollow a").on("click", function() {
        // $.getJSON fn here that unfollows profile and returns success T/F
        if ( success ) {
            $("#unfollow").remove();
            $("#follow-container").html('<div id="follow"><a>Follow profile</a></div>');
        }
    });

}

ユーザーが「プロフィールをフォロー」をクリックしたとします。スクリプトはリンクを削除し、#follow aリンクに置き換えます#unfollow a。ただし、この要素はページの読み込み後に DOM に追加されたため、 がクリックされたときに実行される JS スクリプト#unfollow aは実行されません。

これを解決するために、次のように関数を更新しようとしました。

    if ( success ) {
        $("#follow").remove();
        $("#follow-container").html('<div id="unfollow"><a>Unfollow profile</a></div>');
        // reload function
        follow();
    }

これはうまくいきません。フォロー解除クリックイベントが登録されていません。この場合、他にどのように DOM をリロードしますか?