Reload JS function when load element with AJAX

Question

    $('#followUser').click(function () {
        var userId       = $(this).attr('data-userId'),
            action       = $(this).attr('data-action'),
            currentUser  = $(this).attr('data-currentUserId'),
            elem         = $(this);

        $.ajax({
            method: 'POST',
            url: "/sci-profile/profile/follow",
            data: {
                userId: currentUser,
                profileUserId: userId,
                action: action
            },
            success: function(response)
            {
                 elem.parent().load(window.location.href + ' #unFollowUser');
            }
        });
    });

After clicking on button, JS load new div with all its content, which is good, but problem starts at the moment when new div is loaded.

JS don't recognize new ID. And when I click on new button nothing happens because JS function has loaded when new element doesn't existed.

Is there a way to make some listener to check loads of new DIV and then load also JS function corresponding to that element ID?

[Event delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation?answertab=votes#tab-top) — adeneo, Jul 31 '16 at 17:44
http://stackoverflow.com/questions/8594408/reload-javascript-file-after-an-ajax-request Maybe this link can help. — Jo_bast, Jul 31 '16 at 17:44
I spent some time to understand how to use .delegate() Thank you @Jo_bast for tips. — Stevan Tosic, Jul 31 '16 at 19:17

ArtemSky · Answer 1 · 2016-07-31T19:34:08.080

1

You should use delegate

For example you have this markup

<div id=contentWrapper>
    .....some content here....
    <button type=button id=followUser></button>
</div>

#contentWrapper - static block
anything inside it - dynamic content

Now you should bind your event like that

$('#contentWrapper').on('click', '#followUser' 'function () {
    ...code here...
});

edited Jul 31 '16 at 19:34

answered Jul 31 '16 at 18:15

ArtemSky

1,043
10
19

score 0 · Accepted Answer · answered Jul 31 '16 at 19:03

YES, I made it.

This is html

 <div class="follow">
        {% if followsId == null %}
            <div id="followUser"  data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow">
                Follow
            </div>
        {% else %}
            <div id="unFollowUser" data-followsId="{{ followsId }}" data-action="unFollow">
                Unfollow
            </div>
        {% endif %}
        </div>

And there is JS code

$('.follow').delegate('div', 'click', function(){
    action       = $(this).attr('data-action');
    elem         = $(this);

    if (action == 'follow'){
        var userId       = $(this).attr('data-userId'),
            currentUser  = $(this).attr('data-currentUserId');

        $.ajax({
            method: 'POST',
            url: "/sci-profile/profile/follow",
            data: {
                userId: currentUser,
                profileUserId: userId,
                action: action
            },
            success: function(response)
            {
                elem.parent().load(window.location.href + ' #unFollowUser');
            }
        });
    }

    if (action == 'unFollow'){
        var followsId = $(this).attr('data-followsId');

        $.ajax({
            method: 'DELETE',
            url: "/sci-profile/profile/unFollow",
            data: {
                followsId: followsId
            },
            success: function(response)
            {
                elem.parent().load(window.location.href + ' #followUser');
            }
        });
    }
});

I hope this will help to someone.

.delegate is deprecated. Use .on instead. – ArtemSky Jul 31 '16 at 19:20 — ArtemSky, Jul 31 '16 at 19:20

Reload JS function when load element with AJAX

2 Answers2

Linked