jQuery pagination kills my toggle switches

Question

My page shows posts stored in my Database through a loop. Each post is paired with a like and dislike button. The page has two master controls switches that show/hide all liked posts and show/hide all dislike posts.

This all works perfectly. I am now trying to paginate said posts while still keeping the above functions intact. This is proving difficult. In short, if I click on a div with class "like" var value is set to "1" and ajax fires, storing that value in my database and returns a success message. The same happens for dislike with the difference being that var value is set to "0".

If the user chooses to hide all liked posts, they do indeed hide but no other posts pop up in their places. I'd like it for the pagination to ALWAYS display X results per page even after some posts get toggled. As it is, If I hide 3 of 5 posts, only 2 posts remain instead of having 3 next posts come in.

imtech_pager.js looks for a div called "contained" and looks inside it for all divs with class "z". These divs then get paginated. This does work. It's just that it causes the above problem.

likedislike.js (toggling x number of posts doesn't result in pulling in the next x number of posts):

$(document).ready(function() {
likestatus = 1;
dislikestatus = 1;

$(document).on("click", ".like", function(){
    postID = $(this).attr('id').replace('like_', '');

    // Declare variables
    value = '1';

    myajax();

    return false;
});

$(document).on("click", ".dislike", function(){
    postID = $(this).attr('id').replace('dislike_', '');

    // Declare variables
    value = '0';

    myajax();

    return false;
});

function myajax(){
    // Send values to database
    $.ajax({
        url: 'check.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'POST',
        data: 'postID=' + postID + '&value=' + value,
        success: function(result) {
            $('#Message_' + postID).html('').html(result).prependTo('#post_' + postID);
            if (result.indexOf("No") < 0){ //If return doesn't contain string "No", do this
                if (value == 1){ //If post is liked, do this
                    $('#post_' + postID).removeClass('dislike').addClass('like');
                    $('#dislikebtn_' + postID).removeClass('dislikeimgon').addClass('dislikeimgoff');
                    $('#likebtn_' + postID).removeClass('likeimgoff').addClass('likeimgon');
                    // If Hide Liked checkbox is on, toggle the post
                    if (likestatus % 2 == 0) {
                        $('#post_' + postID).toggle();
                    }
                } else if (value == 0){ //If post is disliked, do this
                    $('#post_' + postID).removeClass('like').addClass('dislike');
                    $('#likebtn_' + postID).removeClass('likeimgon').addClass('likeimgoff');
                    $('#dislikebtn_' + postID).removeClass('dislikeimgoff').addClass('dislikeimgon');
                    // If Hide Disliked checkbox is on, toggle the post
                    if (dislikestatus % 2 == 0) {
                        $('#post_' + postID).toggle();
                    }
                }
            }
        }
    });
}

//When Hide Liked checkbox clicked, toggle all Liked posts.
$('#show_likes').on('click', function() {
    countlikes = $('[id^=post_].like').length;

    if (countlikes >0) {
        likestatus++;

        $('[id^=post_].like').toggle();

        if (likestatus % 2 == 0) {
            $('#hidelikedbtn').removeClass('hidelikedimgoff').addClass('hidelikedimgon');
        } else {
            $('#hidelikedbtn').removeClass('hidelikedimgon').addClass('hidelikedimgoff');
        }
    }

    return false;
});

//When Hide Disliked checkbox clicked, toggle all Disliked posts.
$('#show_dislikes').on('click', function() {
    countdislikes = $('[id^=post_].dislike').length;

    if (countdislikes >0) {
        dislikestatus++;

        $('[id^=post_].dislike').toggle();

        if (dislikestatus % 2 == 0) {
            $('#hidedislikedbtn').removeClass('hidedislikedimgoff').addClass('hidedislikedimgon');
        } else {
            $('#hidedislikedbtn').removeClass('hidedislikedimgon').addClass('hidedislikedimgoff');
        }
    }
    return false;
});
});

imtech_pager.js (this paginates all divs with class "z" - works fine)

var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#contained';
this.numPages = function() {
    var numPages = 0;
    if (this.paragraphs != null && this.paragraphsPerPage != null) {
        numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
    }
    return numPages;
};
this.showPage = function(page) {
    this.currentPage = page;
    var html = '';
    this.paragraphs.slice((page-1) * this.paragraphsPerPage,
        ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
        html += '<div>' + $(this).html() + '</div>';
    });
    $(this.pagingContainerPath).html(html);
    renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
    var pagingControls = 'Page: <ul>';
    for (var i = 1; i <= numPages; i++) {
        if (i != currentPage) {
            pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
        } else {
            pagingControls += '<li>' + i + '</li>';
        }
    }
    pagingControls += '</ul>';
    $(container).html(pagingControls);
}
}

index.php (displays all the divs and buttons)

<div id="content">
<div id="mastercontrols">
    <div id="show_likes" style="position:absolute;">
        <a id="hidelikedbtn" class="hidelikedimgoff" href="#"><span></span></a>
    </div>
    <div id="show_dislikes" style="position:absolute; right: 0em;">
        <a id="hidedislikedbtn" class="hidedislikedimgoff" href="#"><span></span></a>
    </div>
</div>
<div id="contained">
    <?php 
    $data = mysql_query("SELECT * FROM Posts") or die(mysql_error());
    while($row = mysql_fetch_array( $data )){ 
    ?>
    <div class="z">
        <div id="post_<?php echo $row['postID']; ?>" class="post">
            <div id="post_<?php echo $row['postID']; ?>_inside" class="inside">
                <div id="like_<?php echo $row['postID']; ?>" class="like" style="position:absolute; right: 2.5em;">
                    <a id="likebtn_<?php echo $row['postID']; ?>" class="likeimgoff" href="#"><span></span></a>
                </div>
                <div id="dislike_<?php echo $row['postID']; ?>" class="dislike" style="position:absolute; right: 0em;">
                    <a id="dislikebtn_<?php echo $row['postID']; ?>" class="dislikeimgoff" href="#"><span></span></a>
                </div>
                <b><?php echo $row['Title']; ?></b><br>
                <?php echo $row['Description']; ?><br>
                <div id="postleft">
                </div>
                <div id="postright">
                </div>
            </div>
        </div>
        <div id="Message_<?php echo $row['postID']; ?>" class="reminder"></div>
    </div>  
    <?php 
    } 
    ?>
</div>
<div id="pagingControls"></div>
</div>

<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
        pager.paragraphsPerPage = 5; // set amount elements per page
        pager.pagingContainer = $('#container'); // set of main container
        pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
        pager.showPage(1);
});
</script>

So any ideas? This perplexes me to no end! The variables are all different, everything formats properly. The divs do get paginated and the pagination buttons (page 1, 2, 3, etc) all work. There's just something inside imtech_pager.js that stops the rest of my code from working as it should.

Again: Toggling some posts does not result in repopulating the paginated pages. (Hiding 3 of 5 posts results in leaving 2 posts on the page instead of bringing in the next 3 posts for a total of 5 posts on the page).

Answer 1

I think the issue is probably that the elements are being added and removed from the DOM which is then making them lose their handlers. You should be able to just delegate the events.

Since you are using 1.7, I believe the syntax would be:

$(document).on("click", ".dislike", function(){

instead of

$('.dislike').on('click', function() {

This is the equivilent to live pre-1.7. You can refine the delegation for better performance by replacing document with a more specific selector which is the parent of all of the elements you are trying to attach the handler to, but which is not being added and removed.