使用AJAX加载元素时重新加载JS函数 [英] Reload JS function when load element with AJAX

问题描述

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

单击按钮后，JS会加载所有具有所有内容的新div，这很好，但是问题是在加载新div时开始的.

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无法识别新的ID.当我单击新按钮时，没有任何反应，因为在不存在新元素的情况下，JS函数已加载.

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.

有没有办法让某些侦听器检查新DIV的加载，然后还加载与该元素ID相对应的JS函数?

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?

推荐答案

是的，我做到了.

这是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>

有JS代码

$('.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.

这篇关于使用AJAX加载元素时重新加载JS函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！