向 DOM 添加新元素后如何重新加载功能答案

【问题标题】：How to reload function after adding new elements to DOM向 DOM 添加新元素后如何重新加载功能
【发布时间】：2013-05-15 00:53:19
【问题描述】：

我正在为我的应用中的个人资料开发 +Follow 功能。跟随功能只工作一次（在新页面加载时），但在脚本替换 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")
这应该有助于stackoverflow.com/questions/1359018/…

标签： javascript jquery dom

【解决方案1】：

使用事件委托 -

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

和

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

~~另外：你这里有一个错字$(#follow-container")这应该是$("#follow-container")~~

【讨论】：

啊哈！现在我知道如何使用事件委托了。感谢您提供正确的答案和有用的链接。