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?

stackoverflow.com/questions/8594408/… Maybe this link can help. — Jo_bast
– Jo_bast, Commented Jul 31, 2016 at 17:44
I spent some time to understand how to use .delegate() Thank you @Jo_bast for tips. — Stevan Tosic
– Stevan Tosic, Commented Jul 31, 2016 at 19:17

ArtemSky · Accepted Answer · 2016-07-31 19:34:08Z

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, 2016 at 19:34

answered Jul 31, 2016 at 18:15

ArtemSky

1,21312 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stevan Tosic · Accepted Answer · 2016-07-31 19:03:16Z

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.

Collectives™ on Stack Overflow

Reload JS function when load element with AJAX

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related