與Laravel 5的jScroll.js：未找到nextSelector - 銷毀

Question

我正在使用jscroll.js，jquery.upvote.js和Laravel的paginate()方法的組合。 這一切都有效，除了這個小東西，分頁頁面的最后一個帖子總是有不可點擊的投票按鈕。

開發人員控制台中也沒有錯誤。

目前，我正在使用paginate(2)因為我在該類別中只有3個帖子。

編輯：我剛添加了幾個帖子，並注意到投票按鈕只能在第一頁上工作，其余頁面都會使投票按鈕無法點擊。

編輯2：我打開debug: true在jscroll.js中為debug: true ，我收到了這個新錯誤

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