javascript - 带有Laravel 5的jScroll.js:找不到nextSelector-销毁

我正在使用jscroll.js，jquery.upvote.js和Laravel的paginate()方法的组合。除此小东西外，其他所有操作均有效，分页页面中的最后一个帖子始终具有不可点击的投票按钮。

在开发人员控制台中也没有错误。

目前，我正在使用paginate(2)，因为该类别中只有3个帖子。

编辑:我刚刚添加了几条帖子，并注意到投票按钮仅在首页上起作用，其余页面使投票按钮不可点击。

编辑2:我在jscroll.js中打开了debug: true，但遇到了这个新错误



“下一个”选择器标记如下所示

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

如果删除paginate(2)和jscroll.js，所有投票按钮将开始正常运行。
SubredditController

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

风景

<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>

最佳答案

在初始页面之后创建的任何新元素也都需要为其分配click事件。

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