带有 Laravel 5 的 jScroll.js：未找到 nextSelector - 正在销毁

Posted 2023-03-14

【中文标题】带有 Laravel 5 的 jScroll.js：未找到 nextSelector - 正在销毁

【英文标题】：jScroll.js with Laravel 5: nextSelector not found - destroying

【发布时间】：2016-01-09 01:38:06

【问题描述】：

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

开发者控制台也没有错误。

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

编辑：我刚刚添加了一些帖子，并注意到投票按钮仅在第一页上有效，其余页面使投票按钮无法点击。

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

jScroll: nextSelector not found - 正在销毁

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

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

【参考方案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.
    
);

【讨论】：

我不明白，我已经有一个 on.click 事件，我还应该在哪里呢？我应该将$('.scroll').jscroll() 放在 on.click 内吗？

您的点击事件仅适用于页面上的初始元素（加载）。对于 jscroll 添加的每个新元素，您都需要向其添加点击事件 ($('.vote').on('click'))。

我不明白这是怎么回事。也许是一个小代码示例？

我添加了一些示例代码。在示例中，我只是将 on click 事件重新应用于所有元素。您可能只想将其应用于新创建的。

我尝试将它放在$('.scroll') 的回调函数中，但这并没有改变任何东西。