jQuery Ajax Pagination - First page and the one chosen works, others no

Question

Let me describe my problem a bit better then the title... I have CodeIgniter pagination (modified to fit Bootstrap's needs), and I have it list my links as fallows:

<div class="btn-group" id="pgButtons">
<button type="button" class="btn btn-default" disabled>
<strong>1</strong>
</button>
<button type="button" id="page_button" class="btn btn-default" pglink="http://91.139.176.200/home/index/15">
2
</button>
<button type="button" id="page_button" class="btn btn-default" pglink="http://91.139.176.200/home/index/30">
3
</button>
<button type="button" id="page_button" class="btn btn-default" pglink="http://91.139.176.200/home/index/15">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
<button type="button" id="page_button" class="btn btn-default" pglink="http://91.139.176.200/home/index/1470">
Last <span class="glyphicon glyphicon-arrow-right"></span>
</button>

It all worked fine when it was with onClick="window.location='link'" , but since it was taking ages to load I decided to change it with pglink="link" and make it receive the data with Ajax (I created new controller function for this) and added this code:

$(document).ready(function(){
    $("#page_button").click(function(){

        $("#streams #streamsContentBox").fadeOut(300);

        $("#streams #loading").fadeIn(300);

        $.ajax({
            url: $(this).attr("pglink")
        }).done(function(html) {
            $("#streams #streamsContentBox").html(html);
            $("#streams #loading").fadeOut(300);
            $("#streams #streamsContentBox").fadeIn(300);
        });

    });
});

And the result: On page load it shows page 1 results, and when I click a page with number (Next and Last does not work) it loads that page. After this (it gets the links from the same function as the streams) none of the links with numbers (page 1/2/3/4/5....) doesn't work, only the First page and the same page that you clicked on. Tried with each(function(){}) but still doesn't work... A live example:

http://91.139.176.200/

** Forgot to mention that I tried with .each(function(){}); but... for some reason .each does not work for me

Answer 1

This doesn't work because you attach an event to elements that get refreshed after the ajax has been loaded. When the HTML gets replaced by the ajax result, there are no longer events attached to the pagination buttons.

Also, you shouldn't have multiple elements with the same ID. ID's should be used to define a single element, you should use classes to define the buttons.

id="page_button"

Should be:

class="page_button"

You can make sure the buttons keep working after refreshing by setting the click handler on the parent container element and using the selector attribute to define the page_button classes. Like this:

$("#streamsContentBox").on('click', '.page_button', function(){

    $("#streams #streamsContentBox").fadeOut(300);

    $("#streams #loading").fadeIn(300);

    $.ajax({
        url: $(this).attr("pglink")
    }).done(function(html) {
        $("#streams #streamsContentBox").html(html);
        $("#streams #loading").fadeOut(300);
        $("#streams #streamsContentBox").fadeIn(300);
    });
});

This way, the event is set on the streamsContentBox container. When this element is clicked, jQuery will check if the target is an element with the page_button element.