jQuery code works the first time and the second time works only after page refresh

Question

I have a jquery code to load data in page . The part in this code concerning the pagination works at the first time and the second time it doesn't work only after page refresh.

-The first time when I click on a link of page in pagination , the jquery code works and th ajax query is called well.

-The seconde time when I click on a link of page of pagination , the jquery code is ignored and the link in the pagination work as a simple link as if there is not a jquery code.

<div id="mydiv">
   {% for entity in entities %}
    //...
   {% endfor %}

{{ knp_pagination_render(entities) }}

</div>


    <script>
    $(document).ready(function () {

        $("ul#pagination a").on('click', function (e) {
            e.preventDefault();

            $('ul#pagination li.active').removeClass("active");

            var route = $(this).attr('href');

            window.history.pushState(null, "Title", route);

            return loadPage(route);

        });

        function loadPage(route) {
            $.ajax({
                type: 'get',
                dataType: 'html',
                url: route,
                success: function (msg) {
                    if (msg === undefined) {
                        alert('error');
                    }
                    else {
                        $('#mydiv').html(msg);
                    }
                }
            });

        }

        window.onpopstate = function () {
            loadPage(window.location.href);
        };

        });
</script>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Wesley Smith, Nov 30 '15 at 16:53
Probably because it was generated dynamically. Something like...`$(document).on('click', 'ul#pagination a', function(e){...` — camelCase, Nov 30 '15 at 16:54
@Joerg the function loadPage(route) is written below in the script , you can see it — hous, Nov 30 '15 at 16:59
Is see the function, the question is, why you are not just calling the function, instead you use a return, which you never get from your function, because loadPage() has no return. — Joerg, Nov 30 '15 at 17:03

score 6 · Accepted Answer · answered Nov 30 '15 at 17:00

As mentioned, it's because you're dynamically loading the content; your event is not bound to this content yet.

Try changing

$("ul#pagination a").on('click', function (e) {

to

$(document).on('click', "ul#pagination a", function (e) {

This binds the event to dynamically created elements.

score 1 · Answer 2 · answered Nov 30 '15 at 17:00

If those links are inserted dynamically you probably want to use event delegation to attach the event.

$("#mydiv").on('click', 'ul#pagination a', function (e) {});

This will attach the event at a higher element that won't change over time as far as being removed and inserted and losing the attached events. And the event will be delegated to elements that are being dynamically changed over time.

score 1 · Answer 3 · edited May 23 '17 at 12:30

You should use $(document).on(events,selector,handler) while binding events on dynamically generating dom element.I think the following code solves your problem.

 $(document).on('click','#ul#pagination a',function(e){
        e.preventDefault();
        $('ul#pagination li.active').removeClass("active");
        var route = $(this).attr('href');
        window.history.pushState(null, "Title", route);
        return loadPage(route);
});

For details you can also check this link http://api.jquery.com/on/

For more clarification you can also see the the answer to this question How does jQuery.on() work?

jQuery code works the first time and the second time works only after page refresh

3 Answers3

Linked