Django jquery: новые элементы потеряли функциональность после прокрутки пагинации

Я создал страницу, где мои посты отображаются после прокрутки вниз, у них есть функция like, которая хорошо работает на первых 3 элементах (от page=1), но для тех постов, которые отображаются с пагинацией функция likes не работает. Даже console.log('click') не вызывает никакого лога в консоли.

list.html

{% extends "base.html" %}

{% block content %}

<div id="image-list">
    {% include "content/list_ajax.html" %}
</div>
{% endblock %}

{% block domready %}
var page = 1;
var empty_page = false;
var block_request = false;
var max_page = {{posts.paginator.num_pages}};

$(window).scroll(function(){
    var margin = $(document).height() - $(window).height()
    var postion = $(document).scrollTop()
    if (0.9*margin < postion && block_request==false) {
        page += 1
        block_request=true
        $.get(
            '?page=' + page,
            function(data){
                if (page > max_page) {
                    empty_page = true}
                else{
                    $('#image-list').append(data);
                    block_request=false}
            }

        )
    }
})

$('button.like').click(function(){
    var id_but = $(this).data('id')
    console.log('click')
    $.post(
        '{% url "content:post_like" %}',
        data = {
            id : $(this).data('id'),
            action : $(this).data('action')
        },
        function(){
            var button_id = 'button#id-'+ id_but
            var span_id = 'span#id-'+ id_but
            var previous_action = $(button_id).data('action')
            var previous_likes = parseInt($(span_id ).text())
            $(button_id).data('action', previous_action == 'unlike' ? 'like' : 'unlike');
            $(button_id).text(previous_action == 'unlike' ? 'Like' : 'Unlike');
            $(span_id).text(previous_action == 'unlike' ? previous_likes-1 : previous_likes+1)}
    )
})
{% endblock %}

list-ajax.html

{% for post in posts %}
    <div class='w3-container w3-card w3-white w3-margin-bottom'>
        <p> {{post.text}} </p>
        <button id='id-{{post.id}}' class="like" data-id="{{post.id}}" 
        data-action="{% if request.user in post.users_like.all %}un{%endif%}like"> 
        {% if request.user in post.users_like.all %}Unlike{% else %}Like{%endif%} </button>
        <p> <span id='id-{{post.id}}' class=like>{{post.users_like.count}}</span> likes </p>
    </div>
{% endfor %}

base.html

(...)
$(document).ready(function(){
{% block domready %}
{% endblock %}

views.py

def list(request):
    all_posts = Tweet.objects.all()
    paginator = Paginator(all_posts, 3)
    page = request.GET.get('page', 1)

    try:
        posts = paginator.page(page)
    except EmptyPage:
        posts = paginator.page(paginator.num_pages)
    #if request.is_ajax():
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        return render(request, 'content/list_ajax.html', {'section':'blog', 'posts':posts})
    return render(request, 'content/list.html', {'section':'blog', 'posts':posts}) ```

Вернуться на верх