jScroll.js với Laravel 5: nextSelector không tìm thấy - phá hủy

Question

Tôi đang sử dụng kết hợp jscroll.js, jquery.upvote.js và phương thức paginate() của Laravel. Tất cả đều hoạt động ngoại trừ điều nhỏ nhặt này, bài đăng cuối cùng trong trang pagination luôn có các nút biểu quyết không rõ ràng.

Không có lỗi trong bảng điều khiển của nhà phát triển.

Hiện tại, tôi đang sử dụng paginate(2) vì tôi chỉ có 3 bài đăng trong danh mục.

CHỈNH SỬA: Tôi vừa thêm một vài bài đăng nữa và nhận thấy rằng các nút biểu quyết chỉ hoạt động trên trang đầu tiên, phần còn lại của các trang đang hiển thị các nút bỏ phiếu không thể nhấp được.

EDIT 2: Tôi bật debug: true trong jscroll.js và tôi nhận được lỗi mới này

jScroll: nextSelector không tìm thấy - phá hủy

Các "bên cạnh" đánh dấu chọn trông như thế này

<a href="24?page=2" rel="next">»</a> 

Nếu tôi xóa paginate(2) và jscroll.js tất cả các nút biểu quyết bắt đầu hoạt động bình thường.

SubredditController

$subreddit = Subreddit::with('posts.votes')->with('moderators.user')->where('id', $subreddit->id)->first(); 
$posts = $subreddit->posts()->paginate(2); 

Quan điểm

<link rel="stylesheet" href="{{ URL::asset('assets/css/jquery.upvote.css') }}"> 
    <script src="{{ URL::asset('assets/js/jquery.upvote.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('assets/js/jquery.jscroll.min.js') }}"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.topic').upvote(); 

      $('.vote').on('click', function (e) { 
       e.preventDefault(); 
       var $button = $(this); 
       var postId = $button.data('post-id'); 
       var value = $button.data('value'); 
       $.post('http://localhost/reddit/public/votes', {postId:postId, value:value}, function(data) { 
        if (data.status == 'success') 
        { 
         // Do something if you want.. 
        } 
       }, 'json'); 
      }); 

      $('.scroll').jscroll({ 
       autoTrigger: true, 
       nextSelector: '.pagination li.active + li a', 
       contentSelector: 'div.scroll', 
       callback: function() { 
        $('ul.pagination:visible:first').hide(); 
       } 
      }); 
     }); 
    </script> 

<div class="scroll"> 
    @foreach($posts as $post) 
     @include('partials/post') 
    @endforeach 
    {!! $posts->render() !!} 
</div> 

Answer 1

Bất kỳ yếu tố mới được tạo ra sau trang ban đầu sẽ cần phải có những sự kiện nhấp chuột giao cho họ cũng có.

// transform anonymous function to real and reusable one 
function voteClick(e) { 
    e.preventDefault(); 
    var $button = $(this); 
    var postId = $button.data('post-id'); 
    var value = $button.data('value'); 
    $.post('http://localhost/reddit/public/votes', {postId:postId, value:value}, function(data) { 
     if (data.status == 'success') 
     { 
      // Do something if you want.. 
     } 
    }, 'json'); 
} 

$('.vote').on('click', 'voteClick'); // use new function here 

$('.scroll').jscroll({ 
    autoTrigger: true, 
    nextSelector: '.pagination li.active + li a', 
    contentSelector: 'div.scroll', 
    callback: function() { 
     $('ul.pagination:visible:first').hide(); 
     $('.vote').on('click', voteClick); // add this to apply the event to all of your .vote elements again. 
    } 
});