jQueryのページネーションはトグルスイッチを無効にします

Question

マイページには、私のデータベースに格納された投稿がループによって表示されます。各投稿は、好き嫌いのボタンとペアになっています。ページには、好きな投稿をすべて表示/非表示にする2つのマスターコントロールスイッチがあり、嫌いな投稿をすべて表示/非表示します。

これは完全に機能します。私は今、上記の機能をそのまま維持しながら、投稿を改ページしようとしています。これは難しいことです。つまり、クラス "like"を持つdivをクリックすると、var値が "1"に設定され、ajaxが起動し、その値がデータベースに格納され、成功メッセージが返されます。違いは、var値が "0"に設定されていることです。

お気に入りの投稿をすべて非表示にすると、実際には非表示になりますが、他の投稿は表示されません。いくつかの投稿がトグルされた後であってもページごとにXの結果を常に表示するようにページネーションをしたいと思います。つまり、5つの投稿のうち3つを非表示にすると、次の投稿が3つ入るのではなく、2つの投稿のみが残ります。

imtech_pager.jsは "contained"という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（これはクラス「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つを隠すと、次の3つの投稿をページに表示する代わりに、2つの投稿をページに残すことになります）。

Answer 1

おそらく、要素が追加されてDOMから削除されてしまって、ハンドラが失われる可能性があると思います。イベントを委任できるだけです。

あなたが1.7を使用しているので、私は、構文は次のようになり信じる：

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

代わりの

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

これはlive事前1.7にequivilentです。 documentを、ハンドラをアタッチしようとしているすべての要素の親であるが、追加および削除されていないより具体的なセレクタに置き換えることによって、デリゲートのパフォーマンスを向上させることができます。