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

Question

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

開發者控制檯中沒有錯誤。

目前，我正在使用paginate(2)，因爲我只有3個職位的類別。

編輯：我剛剛添加了幾個帖子，並注意到投票按鈕只在第一頁上工作，其餘的頁面渲染投票按鈕不可點擊。

編輯2：我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. 
    } 
});