jquery doesn't recognize modified elements by ajax

Asked Sep 21 '20 at 09:58

Active Sep 21 '20 at 11:19

Viewed 21 times

I update pagination with ajax. Once the pagination is update with ajax, jquery doesn't respond to clicks any more.

How do I make jquery recognize the new added elements?

Here is my js code:

$(document).ready(function () {

    $(".page").click(function () {
        $.ajax({
            url: '/ajax_request',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                "page": page,
            }),

            success: function (response) {
                $('#main_table').find("tr:not(:nth-child(1))").remove();

                const pagination_div = $('div.pagination');
                pagination_div.empty()
                let html = '';
                $.each(response['pages'], function (indx, value) {
                    html += '<a class="page" id=' + value + '>' + value + '</a>'
                })

                pagination_div.html(html);

            }
        })
    })
})

edited Sep 21 '20 at 11:19

asked Sep 21 '20 at 09:58

Qendrim Krasniqi

1

`$(".page").click` only applies to elements that exist at the time the code runs - if you add new `.page` elements, they didn't exist at the time, so they don't have the event bound to them. – freedomn-m Sep 21 '20 at 10:08
How do i make the event bound to them after ajax reponse? – Qendrim Krasniqi Sep 21 '20 at 11:01
1

@QendrimKrasniqi The linked question on the top (blue box) already has the answer you seek. – Mark Baijens Sep 21 '20 at 11:23

jquery doesn't recognize modified elements by ajax

0 Answers0