jQuery not working after ajax call, even though I'm using the correct on() method

Question

I'm using django-el-pagination, a django package that allows ajax pagination. I'm paginating a queryset of Comment (a list of comments). The queryset is inside comments.html, which is inside comments_base.html, which is inside article.html (the parent view). Here's my views:

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

So when I go to the next set of comments in the pagination, jQuery doesn't work. And I assume this is because of it being appended or dynamic content. So I used the on() method which other answers say to do. However it still doesn't work. I'll just show a simple example to show it doesn't work:

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

Doesn't change color onclick. So is there any reason why it still doesn't work, and how can I fix it?

I've tried and it doesn't work. Plus every other answer says to use `on()`: https://stackoverflow.com/questions/20962471/jquery-function-doesnt-work-after-ajax-call edit: By click do you mean `$('.upvotes').click(function()`? — Zorgan, Jun 17 '17 at 23:45
what is that you are trying to achieve. tell me I will help you with alternative or fix this. — Aravind, Jun 17 '17 at 23:47
jQuery doesn't work on appended (dynamic) content. So jQuery doesn't work on every comment set of my pagination after the 1st one. — Zorgan, Jun 17 '17 at 23:49

score 2 · Accepted Answer · answered Jun 17 '17 at 23:54

This sounds like an application of jquery's on method overload that uses the additional selector argument:

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

From the jquery documentation:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

So this should work:

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

Or in place of the 'body' selector use any other element that exists in the DOM at the time that javascript is executed.

jQuery not working after ajax call, even though I'm using the correct on() method

1 Answers1