jQuery 函数在另一个函数运行后不起作用

Question

我有两个 jquery 函数，一个用于关注，一个用于取消关注，当您单击其中任何一个时，它们都会更改为相反的单词。问题是，如果您单击“关注”，它会像应有的那样更改为“取消关注”，但除非刷新，否则您无法再次单击该链接。这是我的功能:

$(function(){
    $('#follow').on('click',function(){
        $.ajax({
            type: 'POST',
            url : 'functions/follow.php',
            data: {follower : $.upnamespace.session_id,
                   user : $.upnamespace.p_id},
            success: function(result) {
                if(result == 'followed'){
                    $('#follow').attr('id','unfollow').text('-Unfollow');
                }
            }
        });
    });
});
$(function(){
    $('#unfollow').on('click',function(){
        $.ajax({
            type: 'POST',
            url : 'functions/unfollow.php',
            data: {follower : $.upnamespace.session_id,
                   user : $.upnamespace.p_id},
            success: function(result) {
                if(result == 'unfollowed'){
                    $('#unfollow').attr('id','follow').text('+Follow');
                }
            }
        });
    });
});

这是其中一个链接，另一个链接相同，只是 ID 为“unfollow”且文本为“-Unfollow”

<a id="follow" class="small button blue" style="color:#fff">+Follow</a>

Answer 1

由于最初不存在取消关注，因此需要使用事件委托(delegate)

$(document).on('click','#unfollow',function(){

• http://learn.jquery.com/events/event-delegation/