javascript - 使用AJAX加载元素时重新加载JS函数

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

单击按钮后，JS 加载新的 div 及其所有内容，这很好，但是在加载新的 div 时问题就开始了。

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

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

Answer 1

你应该使用委托(delegate)

例如，您有这个标记

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

• #contentWrapper - 静态 block
• 其中的任何内容 - 动态内容

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

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