ajax 调用后 jQuery 不工作，即使我使用了正确的 on() 方法答案

【问题标题】：jQuery not working after ajax call, even though I'm using the correct on() methodajax 调用后 jQuery 不工作，即使我使用了正确的 on() 方法
【发布时间】：2017-11-20 11:33:41
【问题描述】：

我正在使用django-el-pagination，django package that allows ajax pagination。我正在对Comment（cmets 列表）的查询集进行分页。查询集在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)

cmets_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 %}

cmets.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 %}

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

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

点击时不改变颜色。那么它仍然无法正常工作有什么原因，我该如何解决？

【问题讨论】：

你为什么使用 jquery。请改用(click)。
我试过了，还是不行。加上其他所有答案都说要使用on()：stackoverflow.com/questions/20962471/… 编辑：点击是指$('.upvotes').click(function()？
您想要达到的目标是什么。告诉我，我会帮助你解决这个问题。
jQuery 不适用于附加（动态）内容。所以 jQuery 不适用于我在第一个分页之后的每个评论集。

标签： javascript jquery ajax django pagination

【解决方案1】：

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

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

来自 jquery 文档：

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

所以这应该有效：

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

或者使用执行 javascript 时 DOM 中存在的任何其他元素来代替“body”选择器。

【讨论】：