jScroll.js mit Laravel 5: nextSelector nicht gefunden - zerstören

Question

Ich verwende eine Kombination von jscroll.js, jquery.upvote.js und Laravels paginate() Methode. Es funktioniert alles außer für diese kleine Sache, der letzte Post auf der Paginierungsseite hat immer nicht klickbare Abstimmknöpfe.

Keine Fehler in der Entwicklerkonsole entweder.

Im Moment benutze ich paginate(2), weil ich nur 3 Beiträge in der Kategorie habe.

EDIT: Ich habe gerade ein paar weitere Beiträge hinzugefügt und festgestellt, dass die Abstimmknöpfe nur auf der ersten Seite funktionieren, der Rest der Seiten sind die Schaltfläche nicht schaltbar.

EDIT 2: Ich schaltete debug: true in jscroll.js und ich bekomme diese neue Fehler

jScroll: nextSelector nicht gefunden - zu zerstören

Die "next" Selektor-Markup sieht aus wie dieses

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

Wenn ich paginate(2) und jscroll.js entferne, funktionieren alle Voting-Tasten ordnungsgemäß.

SubredditController

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

Der Blick

<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

Alle neuen Elemente erstellt werden, nachdem die erste Seite, die Click-Ereignisse, um sie auch zugewiesen werden müssen.

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