CODEWITHSUNDEEP
jqueryajax
hous
hous

Reputation: 2679

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

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>

Upvotes: 1

Views: 2487

Answers (3)

Tanbir Ahmed
Tanbir Ahmed

Reputation: 320

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?

Upvotes: 1

AtheistP3ace
AtheistP3ace

Reputation: 9691

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.

Upvotes: 1

camelCase
camelCase

Reputation: 5598

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.

Upvotes: 7

Related Questions