jScroll.js con Laravel 5: nextSelector non trovato - distruggente

Question

Sto usando una combinazione di jscroll.js, jquery.upvote.js e il metodo paginate() di Laravel. Funziona tutto tranne che per questa piccola cosa, l'ultimo post nella pagina di impaginazione ha sempre pulsanti di voto non cliccabili.

Nessun errore nella console dello sviluppatore.

Al momento, sto usando paginate(2) perché ho solo 3 post nella categoria.

MODIFICA: Ho appena aggiunto alcuni post in più e ho notato che i pulsanti di voto funzionano solo sulla prima pagina, il resto delle pagine sta rendendo i pulsanti di voto non selezionabili.

EDIT 2: ho acceso debug: true in jscroll.js e sto ottenendo questo nuovo errore

jScroll: nextSelector non trovato - distruggendo

La "prossima" selettore di markup sembra che questo

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

Se rimuovo paginate(2) e jscroll.js tutti i pulsanti di voto iniziano a funzionare correttamente.

SubredditController

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

La vista

<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

Eventuali nuovi elementi essere creato dopo la pagina iniziale sarà bisogno di avere gli eventi click loro assegnati anche.

// 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. 
    } 
});