jQuery分页杀死了我的切换开关

Question

我的页面通过循环显示存储在我的数据库中的帖子。每个帖子都配有喜欢和不喜欢的按钮。该页面有两个主控制开关，显示/隐藏所有喜欢的帖子，并显示/隐藏所有不喜欢的帖子。

这一切都很完美。我现在正试图对所述帖子进行分页，同时仍保持上述功能完好无损。这证明是困难的。简而言之，如果我点击类“like”的div，则将var值设置为“1”并激活ajax，将该值存储在我的数据库中并返回成功消息。对于不喜欢也是如此，不同之处在于var值设置为“0”。

如果用户选择隐藏所有喜欢的帖子，他们确实隐藏了，但没有其他帖子在他们的位置弹出。我喜欢它的分页，即使在一些帖子被切换之后，总是每页显示X个结果。事实上，如果我隐藏5个帖子中的3个，只剩下2个帖子，而不是有3个下一个帖子进来。

imtech_pager.js查找名为“contained”的div，并在其中查找所有具有类“z”的div。然后这些div被分页。这确实有效。只是它导致了上述问题。

likesislike.js（切换x个帖子不会导致下一个x帖子的数量）：

$(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（这个用“z”类对所有div进行分页 - 工作正常）

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（显示所有div和按钮）

<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>

那么任何想法？这让我感到困惑！变量都是不同的，所有格式都正确。 div已经分页，分页按钮（第1,2,3页等）都可以正常工作。 imtech_pager.js中只有一些内容可以阻止我的其余代码按原样运行。

再次： 切换一些帖子不会导致重新填充分页页面。 （隐藏5个帖子中的3个会导致在页面上留下2个帖子，而不是在页面上总共5个帖子中引入接下来的3个帖子。）

Answer 1

我认为问题可能是从DOM中添加和删除元素，然后使它们失去处理程序。您应该能够委派事件。

由于你使用的是1.7，我相信语法是：

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

而不是

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

这与1.7之前的live等效。您可以通过将document替换为更具体的选择器来优化委派以获得更好的性能，该选择器是您尝试将处理程序附加到的所有元素的父级，但不会添加和删除。