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

您应该使用委托

例如，你有这个标记

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

#contentWrapper - 静态阻止
内部的任何内容 - 动态内容

现在你应该绑定你的事件

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

Answer 2

是的，我做到了。

这是html

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

还有JS代码

{{1}}

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

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

2 个答案: