Django Endlesss分页打破了由Endlesss分页产生的按钮

Question

在我的网站上，我的帖子分页无休止。 每个帖子都有一个喜欢和不喜欢的按钮，可以使用ajax进行操作。 第一组帖子具有工作按钮，但是所有带有分页功能的帖子都没有工作按钮。单击按钮时，他们甚至不运行ajax来向我的views.py文件发送查询，但是第一组帖子中有可用的帖子。

urls.py

    path("likepost/", user_views.like_post_view, name='like_post'),
    path("dislikepost/", user_views.dislike_post_view, name='dislike_post'),

views.py file

    sort = request.GET.get("sort")
    if sort=="newest":
        posts = Post.objects.filter(deleted=False).order_by('-date_posted')
        sort_type = "newest"

    if sort=="oldest":
        posts = Post.objects.filter(deleted=False).order_by('date_posted')
        sort_type = "oldest"

    if sort=="top-alltime":
        posts = Post.objects.filter(deleted=False).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
        sort_type = "top-alltime"

    if sort==None or sort=="top-today":
        today = datetime.now().date()
        today_start = datetime.combine(today, time())
        posts = Post.objects.filter(deleted=False, date_posted__gte=today_start).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
        sort_type = "top-today"

    if sort=="top-week":
        current_week = date.today().isocalendar()[1] 
        posts = Post.objects.filter(deleted=False, date_posted__week=current_week).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
        sort_type = "top-week"

    page = request.GET.get('page', 1)
    paginator = Paginator(posts, 4)
    trending_tags = Post.tags.most_common()[:5]
    try:
        posts_given = paginator.page(page)
    except PageNotAnInteger:
        posts_given = paginator.page(1)
    except EmptyPage:
        posts_given = paginator.page(paginator.num_pages)

    context = {
        "trending_tags": trending_tags,
        "posts_given": posts_given,
        "sort": sort_type
    }
    return render(request, "users/index.html", context)

@login_required
@require_GET
def like_post_view(request):
    print("LIKE REQUESTED!!!!!!!!!!!!!")
    if request.method == 'GET':
        user = request.user
        user = User.objects.get(username=user)
        post_id = request.GET.get('post_id', None)
        post = Post.objects.get(id=post_id)

        if like_post.objects.filter(user=user, post=post).exists():
            # user has already liked this post
            # remove like/user
            like_post.objects.filter(user=user, post=post).delete()
            #return -1
            return HttpResponse(-1)
        else:
            # add a new like for the post
            like_post.objects.create(post=post, user=user)
            if dislike_post.objects.filter(user=user, post=post).exists():
                dislike_post.objects.filter(user=user, post=post).delete()
                return HttpResponse(+2)
            return HttpResponse(+1)

@login_required
@require_GET
def dislike_post_view(request):
    print("DISLIKE REQUESTED!!!!!!!!!!!!!")
    if request.method == 'GET':
        user = request.user
        user = User.objects.get(username=user)
        post_id = request.GET.get('post_id', None)
        post = Post.objects.get(id=post_id)

        if dislike_post.objects.filter(user=user, post=post).exists():
            # user has already disliked this post
            # remove dislike/user
            dislike_post.objects.filter(user=user, post=post).delete()
            return HttpResponse(+1)
        else:
            # add a new dislike for the post
            dislike_post.objects.create(post=post, user=user)
            if like_post.objects.filter(user=user, post=post).exists():
                like_post.objects.filter(user=user, post=post).delete()
                return HttpResponse(-2)
            return HttpResponse(-1)

template

{% load static %}
{% block content %}
    <h1>Homepage</h1>
        <div class="infinite-container" id="infinite-container" style="max-width:700px;width:100%;margin-left:auto;margin-right:auto;">
                <form action="/action_page.php">
                {% csrf_token %}
                    <div style="display:inline-block;">
                      <h5 style="margin-left:10px;">Sort by</h5>
                      <select name="sort" class="sort_by" id="sort_by" style="margin-left:10px;">
                        <option value="newest">Newest</option>
                        <option value="top-today" selected="selected">Top Today</option>
                        <option value="top-week">Top This Week</option>
                        <option value="top-alltime">Top All Time</option>
                        <option value="oldest">Oldest</option>
                      </select>
                    </div>
                </form>
            {% for post in posts_given %}
                <div class="post infinite-item" style="background-color:#494a4d;border-radius: 8px; color: white;padding:10px;margin:10px;">
                    <h2><a href="/post/{{ post.id }}/{{ post.slug }}" style="color: white;word-wrap: break-word;">{{ post.title }}</a><h2>
                    <hr>
                    <a href="/post/{{ post.id }}/{{ post.slug }}"><img src="/uploads/{{ post.image }}" alt="{{ post.image }}" style="max-width:100%; max-height:500px;"></a>
                    <hr>
                    <div class="row-post">
                        <div class="column-post-left">
                            <h4 style="text-align: left;">by <a href="/profile/{{ post.user.username }}">{{ post.user.username }}</a> | {{ post.date_posted | timesince }} ago {% if request.user.is_authenticated and post.user == request.user %} | <a href="/post/{{ post.id }}/edit/{{ post.slug }}" style="color:white;font-size:20px;">edit</a>{% else %} | <a href="/reportpost/{{ post.id }}/" style="color:white;font-size:20px;">report</a>{% endif %}</h4>
                            <h5 style="word-wrap: break-word;word-break: break-word;">{% for tag in post.tags.all %} <a href="/search?type=tags&query={{ tag }}" style="text-align: left;color:red;word-wrap: break-word;word-break: break-word;">#{{ tag }}</a>{% endfor %}</h5>
                            <h5>{{ post.comment_count }} comments</h5>
                        </div>
                        <div class="column-post-right">
                            <input src="{% static "memeplaza/rocket_white.png" %}" type="image" style="max-width:50px;max-height:50px;" class="like" name="{{ post.id }}" value="Like"/>
                            <p style="font-size:22px;" id="{{ post.id }}">{{ post.like_count }}</p>
                            <input src="{% static "memeplaza/flash_white.png" %}" style="max-width:50px;max-height:50px;" type="image" class="dislike" name="{{ post.id }}" value="Dislike" />
                        </div>
                    </div>
                </div>

            {% endfor %}
        </div>
        {% if posts_given.has_next %}
            <a class="infinite-more-link" href="?sort={{ sort }}&page={{ posts_given.next_page_number }}"></a>
        {% endif %}
    <script>
    var infinite = new Waypoint.Infinite({element: $('.infinite-container')[0]});
    $('.sort_by').change(function(){
          var sort_type = $('#sort_by :selected').val();
          window.location = "/?sort="+sort_type;  
        })
    $('.like').click(function(){
          var id = $(this).attr('name');
          console.log("Like button pressed!");
          $.ajax({
                   type: "GET",
                   url: "{% url 'like_post' %}",
                   data: {'post_id': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(response){
                       var score = $("#" + id).text();
                       score = score.split(" ")[0];
                       score = parseInt(score) + parseInt(response);
                       $("#" + id).text(score);
                   }
              }); 
        })
    $('.dislike').click(function(){
          var id = $(this).attr('name');
          console.log("disLike button pressed!");
          $.ajax({
                   type: "GET",
                   url: "{% url 'dislike_post' %}",
                   data: {'post_id': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(response){
                       var score = $("#" + id).text();
                       score = score.split(" ")[0];
                       score = parseInt(score) + parseInt(response);
                       $("#" + id).text(score);
                   }
              });
        })
    </script>
    {% if sort is not empty %}
        <script>
        $(document).ready(function(){
          $("#sort_by").val("{{ sort }}");
        });
        </script>
    {% endif %}
{% endblock content %}```

Answer 1

您应使用$('selector').on将事件绑定到尚不存在的元素

$('#infinite-container').on('click', '.like', function() {
    ...
})

$('#infinite-container').on('click', '.dislike', function() {
    ...
})

使用$('.like').click仅将事件处理程序绑定到页面上当前存在的元素