使用 AJAX 加载元素时重新加载 JS 函数答案

【问题标题】：Reload JS function when load element with AJAX使用 AJAX 加载元素时重新加载 JS 函数
【发布时间】：2016-07-31 17:39:19
【问题描述】：

    $('#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 的那一刻开始。

JS 无法识别新的ID。当我点击新按钮时，什么也没有发生，因为当新元素不存在时，JS 函数已经加载。

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

【问题讨论】：

Event delegation
stackoverflow.com/questions/8594408/… 也许这个链接可以提供帮助。
我花了一些时间了解如何使用 .delegate() 谢谢@Jo_bast 的提示。

标签： javascript jquery ajax dom

【解决方案1】：

你应该使用委托

例如你有这个标记

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

#contentWrapper - 静态块
里面的任何东西 - 动态内容

现在你应该像这样绑定你的事件

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

【讨论】：

【解决方案2】：

是的，我做到了。

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

我希望这对某人有所帮助。

【讨论】：

.delegate 已弃用。请改用 .on。