与Laravel 5的jScroll.js:未找到nextSelector - 销毁

Question

我正在使用jscroll.js,jquery.upvote.js和Laravel paginate()方法的组合.这一切都有效,除了这个小东西,分页页面中的最后一个帖子总是有不可点击的投票按钮.

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

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

编辑:我刚添加了几个帖子,并注意到投票按钮只能在第一页上工作,其余页面都会使投票按钮无法点击.

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

jScroll:找不到nextSelector - 销毁

"下一个"选择器标记看起来像这样

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

Answer 1

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

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