最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to reload function after adding new elements to DOM - Stack Overflow

programmeradmin2浏览0评论

I'm working on a +Follow function for a profile in my app. Follow functionality works just once (on a fresh page load), but after the script replaces DOM elements, it doesn't work.

HTML output when a profile is not being followed by user:

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

HTML output When a profile is currently followed by user:

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

The magic happens in jQuery. The following function is wrapped in a $(document).ready() function:

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>');
        }
    });

}

Suppose a user clicks "Follow profile". The script removes the #follow a link and replaces it with a #unfollow a link. However, the JS script which runs when #unfollow a is clicked doesn't execute because this element was added to the DOM after page load.

To solve this, I tried to refresh the function like this:

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

This doesn't work. The unfollow click event is not registered. How else do I reload the DOM in this case?

I'm working on a +Follow function for a profile in my app. Follow functionality works just once (on a fresh page load), but after the script replaces DOM elements, it doesn't work.

HTML output when a profile is not being followed by user:

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

HTML output When a profile is currently followed by user:

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

The magic happens in jQuery. The following function is wrapped in a $(document).ready() function:

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>');
        }
    });

}

Suppose a user clicks "Follow profile". The script removes the #follow a link and replaces it with a #unfollow a link. However, the JS script which runs when #unfollow a is clicked doesn't execute because this element was added to the DOM after page load.

To solve this, I tried to refresh the function like this:

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

This doesn't work. The unfollow click event is not registered. How else do I reload the DOM in this case?

Share Improve this question edited May 20, 2013 at 13:00 izolate asked May 20, 2013 at 12:52 izolateizolate 1,6004 gold badges22 silver badges37 bronze badges 2
  • Typo ? $("#follow-container") – Adil Shaikh Commented May 20, 2013 at 12:54
  • 1 This should help stackoverflow./questions/1359018/… – pseudoh Commented May 20, 2013 at 12:56
Add a ment  | 

1 Answer 1

Reset to default 7

Use event delegation -

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

and

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

Also : you have a typo here $(#follow-container") this should be $("#follow-container")

  • http://api.jquery./on/
  • http://learn.jquery./events/event-delegation/
发布评论

评论列表(0)

  1. 暂无评论