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”

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

Answer 1

由于unfollow最初不存在，您需要使用事件委派

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

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

Answer 2

您可以像这样缩短代码，而无需更改ID

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

Answer 3

我不认为更改id属性是最佳解决方案。

尝试类似

的内容

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

另一个函数运行后jQuery函数无法正常工作

3 个答案: