Django REST framework Ajax вызов работает только при первом вызове

Question

В учебнике, которому я следую, есть этот код, который работает при первой загрузке страницы, а затем - нет. Я прочитал все остальные вопросы на тему «ajax вызов работает только в первый раз», но не смог найти соответствующую причину. Учитывая, что код работает при загрузке страницы, я думаю, что в части jQuery есть проблема с привязкой, которая не позволяет кнопке действовать после ее изменения при первом вызове, но я не могу точно определить, что это такое. Я также попытался посетить конечную точку URL (конечную точку среды REST), и каждый раз, когда я обновляю sh страницу, счетчик обновляется правильно. Итак, проблема должна быть где-то во внешнем интерфейсе, так как он может четко найти URL и обновить счетчик один раз, но не может вызвать ajax при последующих щелчках.

<li>
    <a class="like-btn" data-href="{{ obj.get_api_like_url }}" data-likes='{{obj.likes.count}}' href="{{ obj.get_api_like_url }}"> {{obj.likes.count }} | 
    {% for person in obj.likes.all %} 
        {{ person.userprofile.first_name }} 
    {% endfor %}<i class="fab fa-gratipay"></i> </a>
</li> 

В моем jQuery коде :

$(function(){

$(".like-btn").click(function(e)
{
    e.preventDefault();

    var this_ = $(this);
    var likeUrl = this_.attr("data-href");
    console.log("likeUrl: ", likeUrl);

    var likeCount = parseInt(this_.attr("data-likes")) | 0 ;

    var addLike = likeCount;
    var removeLike = likeCount;

    if (likeUrl)
    {
        $.ajax(
        {
            url: likeUrl,              // likeUrl returns the get_api_like_url of the footer Ex/ likeUrl = {{ project.get_api_like_url }} 
            method: "GET",             // 
            data: {},                  // data to be sent to the server
            success: function(data)
            {
                console.log(data);
                console.log('**********************************');
                console.log("Success!");
                console.log("Likes: ", data.likes_num );
                console.log("liked by: ", data.liked_by );
                console.log("data: ", data)

                if(data.liked)
                {
                    updateText(this_, data.likes_num, "Unlike", data.liked_by);


                }
                else
                {
                    updateText(this_, data.likes_num, "Like", data.liked_by);
                }
                console.log("updated the count button")

            },
            error: function(error)
            {
                console.log("error: ", error)
            }
        })

    }

});

function updateText(btn, newCount, verb, extra){
    btn.text(newCount + " " + verb + " " + extra); // e.g. 2 like or 1 unlike
 }

});

Вот код инфраструктуры REST для полноты:

class ProFormaLikeAPI (APIView): #authentication_classes = (authentication.SessionAuthentication,) allow_classes = (permissions.IsAuthenticated,)

def get(self, request, pk=None, format=None):        
    user = self.request.user
    the_pk = pk
    updated = False
    liked = False

    obj = get_object_or_404(Project, pk=the_pk)
    the_url = obj.get_absolute_url()

    if user.is_authenticated():

        if user in obj.likes.all():
            liked = False
            obj.likes.remove(user)

        else:
            liked = True
            obj.likes.add(user)


        likes_num = obj.likes.all().count()

        if likes_num > 1:
            people = 'persons'
        else:
            people = 'person'

        liked_by = [ user.userprofile.first_name for user in obj.likes.all() ]
        updated = True

    data = {'updated': updated,
            'liked': liked,
            'likes_num': likes_num,
            'liked_by': liked_by,
           }

    return Response(data)