Question

我正在使用django-el-pagination，django package that allows ajax pagination。我正在对Comment（注释列表）的查询集进行分页。查询集位于comments.html内，位于comments_base.html内，位于article.html内（父视图）。这是我的观点：

def article(request, category, id, extra_context=None):
    name = resolve(request.path).kwargs['category']
    instance = get_object_or_404(Post, id=id, entered_category=name)

    new_comments_list = Comment.objects.filter(destination=id, parent_id=0).order_by('-timestamp')

    template = 'article.html'
    page_template = 'comments.html'

    if request.is_ajax():
        template = page_template

    context = {
        'id': id,
        'comment_list': new_comments_list,
        'page_template': page_template,
        'instance': instance,
    }
    if extra_context is not None:
        context.update(extra_context)
    return render(request, template, context)

comments_base.html

{% block comments_base %}

<div class="commentsContainer">
    <div class="endless_page_template">
        {% include 'comments.html' %}
    </div>
    {% block js %}
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="{% static 'js/el-pagination/js/el-pagination.js' %}"></script>
        <script>
        $.endlessPaginate({
        });
        </script>
    {% endblock %}
</div>

{% endblock %}

comments.html

{% block comments %}

{% paginate 10 comment_list %}
    {% for i in comment_list %}
        {% if i.parent_comment %}
            <div class="comment_shell hasParent">
         {% else %}
            <div>
        {% endif %}
        <div class='comment_div' data-comment_id="{{ i.id }}">
            <div class="left_comment_div">
                <div class="username_and_votes">
                    <h3><a class='username_foreign'>{{ i.user }}</a></h3>
                    {% for j in i.score.all %}
                        <span class="upvotes">{{ j.upvotes }}</span>
                        <span class="downvotes">{{ j.downvotes }}</span>
                    {% endfor %}
                </div>
                <br>
                <p>{{ i.comment_text }}</p>
            </div>
        </div>
        {% include 'comments.html' with comment_list=i.replies.all %}
    </div>

    {% endfor %}
{% show_pages %}


{% endblock %}

因此，当我在分页中转到下一组注释时，jQuery不起作用。我认为这是因为它被附加或动态内容。所以我使用了on()方法which other answers say to do。但它仍然无效。我只是展示一个简单的例子来证明它不起作用：

$('.upvotes').on('click', function() {
    $(this).css('color', '#fff'); 
});

不改变颜色onclick。那么有什么理由它仍然不起作用，我该如何解决呢？

Answer 1

这听起来像jquery的on方法重载的应用，它使用了额外的选择器参数：

.on( events [, selector ] [, data ], handler )

来自jquery文档：

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。

所以这应该有效：

$('body').on('click', '.upvotes', function() {
    $(this).css('color', '#fff'); 
});

或代替＆＃39;身体＆＃39; selector使用javascript执行时存在于DOM中的任何其他元素。

即使我正在使用正确的on（）方法，jQuery也无法在ajax调用之后工作

1 个答案: