jScroll.js with Laravel 5: nextSelector not found - destroying

Question

I am using a combination of jscroll.js, jquery.upvote.js and Laravel's paginate() method. It all works except for this little thing, the last post in the pagination page always has unclickable voting buttons.

No errors in the developer's console either.

At the moment, I'm using paginate(2) because I only have 3 posts in the category.

EDIT: I just added a few more posts and noticed that the voting buttons only work on the first page, the rest of the pages are rendering the vote buttons unclickable.

EDIT 2: I turned on debug: true in jscroll.js and I'm getting this new error

jScroll: nextSelector not found - destroying

The "next" selector markup looks like this

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

If I remove paginate(2) and jscroll.js all voting buttons start functioning properly.

SubredditController

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

The view

<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

Any new elements being created after the initial page will need to have the click events assigned to them also.

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