The pagination works on the first click only.

Question

I have my JavaScript running a function before display that hides all the list items then displays the ten that should be displayed. I have the bottom pagination anchor tags being created on the fly. The first time you click one of the buttons, the click event is run. However any further clicks will not run the click event.

I've tried the click event this way: $(element).click( function() { } ); And this way: $(element).on("click", function() { } );

They both behave the same. Why would this only work the first time clicked? The code is below:

// Problem: Create search functionality and pagination

$(document).ready( function() {

    var listObject = $(".student-list");
    var itemsInList = listObject.children().length;
    var pageCount = Math.ceil( itemsInList / 10 );
    var currentPage = 1;
    var pageStartingIndex = parseInt( (currentPage - 1) * 10 );
    var strPages = '';

    function stylePage() {

        console.log("currentPage = " + currentPage);

        pageStartingIndex = parseInt( (currentPage - 1) * 10 );

        console.log("pageStartingIndex = " + pageStartingIndex);

        // loop through children in the list
        for ( var i = 0; i < itemsInList; i++ ) {
            // hide child
            if ( listObject.children()[i] ) {
                listObject.children()[i].style.display = 'none';
            }
        }

        // loop through children in the list
        for ( var j = pageStartingIndex; j < pageStartingIndex + 10; j++ ) {
            // show child
            if ( listObject.children()[j] ) {
                listObject.children()[j].style.display = 'block';
            }
        }

        // loop through page count
        // create list element
        var $ul = document.createElement("ul");
        for ( var k = 1; k <= pageCount; k++ ) {

            // create li element
            var $li = document.createElement("li");
            // create anchor element
            var $a = document.createElement('a');

            // set anchor tag values
            $a.setAttribute('href',"#");
            if ( k === currentPage ) {
                $a.setAttribute('class',"active");
            }
            $a.innerHTML = k;

            // append anchor to li
            $li.appendChild($a);

            // append li to list
            $ul.appendChild($li);

        }

        // display pagination string
        $(".pagination").html($ul);

    }

    // do initial styling
    stylePage();

    // if pagination button is clicked then update the page
    $(".pagination li a").on("click", function(event) {

        event.preventDefault();

        alert('An anchor tag has been clicked.');

        console.log("---");

        currentPage = parseInt( $(this).text() );

        stylePage();

    });

});

Edited for readability - Dane E. Parchment Jr. (Moderator)

Answer 1 · 2016-09-22T18:49:26Z

September 22, 2016 6:49pm

you rebuild the pagination items in your stylePage function but do not bind the eventhandler again to these new elements. you either have to put the event binding into the stylePage function or use a selector as a second argument when you bind the eventhandler like so: $('.pagination').on('click', 'li a', function(e) {})

Welcome to the Treehouse Community

Looking to learn something new?

matthewshear

matthewshear

The pagination works on the first click only.

1 Answer

Corina Meyer

Corina Meyer

matthewshear

matthewshear