javascript - 将新元素添加到DOM后如何重新加载函数

我正在为我的应用中的个人资料使用+关注功能。跟踪功能仅工作一次(在新页面加载时)，但是在脚本替换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链接。但是，单击#unfollow a时运行的JS脚本无法执行，因为此元素是在页面加载后添加到DOM的。

为了解决这个问题，我尝试刷新如下函数:

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

这行不通。未跟随点击事件未注册。在这种情况下，我还应该如何重新加载DOM？

最佳答案

使用事件委派-

$("#follow-container").on("click","#follow a", function() {

和

$("#follow-container").on("click","#unfollow a", function() {

另外:您在这里输入错字$(#follow-container")这应该是$("#follow-container")

http://api.jquery.com/on/

http://learn.jquery.com/events/event-delegation/