jQuery分頁殺死我的撥動開關

Question

我的頁面通過循環顯示存儲在我的數據庫中的帖子。每個帖子都配有一個喜歡和不喜歡的按鈕。該頁面有兩個主控開關，用於顯示/隱藏所有喜歡的帖子並顯示/隱藏所有不喜歡的帖子。

這一切都完美。我現在試圖分頁說，而仍然保持上述功能完好無損。這證明很困難。簡而言之，如果我點擊類「喜歡」var的值設置爲「1」和ajax觸發，將該值存儲在我的數據庫中，並返回一條成功消息。不同之處在於不同之處在於var值設置爲「0」。

如果用戶選擇隱藏所有喜歡的帖子，他們確實隱藏，但沒有其他帖子在他們的位置彈出。即使在某些帖子被切換後，我也希望分頁能夠始終顯示每頁的X個結果。實際情況是，如果我隱藏5篇帖子中的3篇，則只剩下2篇帖子，而不是有3篇帖子進來。

imtech_pager.js尋找一個名爲「contained」的div，並在裏面查找所有div爲「 Z」。這些div然後分頁。這確實有用。只是它導致了上述問題。

likedislike.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（此進行分頁所有的div類「Z」 - 工程精）

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> 

所以任何想法？這讓我困惑不已！變量都是不同的，一切格式都正確。分區確實分頁，分頁按鈕（第1，2，3等）都可以工作。 imtech_pager.js中只有一些東西阻止我的代碼的其餘部分不能正常工作。

再次： 切換某些帖子不會導致重新填充分頁頁面。 （隱藏3個帖子中的3個會導致在頁面上留下2個帖子，而不是在頁面上引入總共5個帖子的下3個帖子）。

Answer 1

我認爲這個問題可能是元素被添加並從DOM中刪除，然後讓他們失去處理程序。你應該只能委託事件。

由於使用的是1.7，我相信語法是：中

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

代替

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

這是equivilent到live前1.7。您可以通過用更具體的選擇器替換document來優化委派以獲得更好的性能，該選擇器是您嘗試附加處理程序的所有元素的父項，但未添加和刪除。