jquery 不适用于 jScroll 显示的项目（无限滚动）

Question

我在我的 Laravel 5.1 应用程序中使用 jScroll (jscroll.com) 进行无限滚动。我正在进一步使用一些 jquery，我希望在单击每个帖子的“Like”按钮时触发它。 Jquery 在第一页的帖子（即localhost/myproject/index）上运行良好，但对于 jScroll 从下一页（即localhost/myproject/index?page=2 等）附加的帖子不会触发它。

这是我显示帖子的代码：

    @foreach($posts as $post)
        <div class="panel panel-default">
            <div class="panel-body post">
                <h3>{{ $post->title }}</h3>
                <hr>
                <p>{{ $post->discripion }}</p>
            </div>
            <div class="panel-footer">
                <div class="btn-group">
                    <button type="button" data-id="{{$post->id}}" class="btn btn-default like-btn">Like</button>
                </div>
            </div>
    </div>
@endforeach

我希望为每个帖子触发的简单 jquery 是：

<script type="text/javascript">
            $('button.like-btn').on('click',function(){
                var post_id = $(this).data('id');
                alert('Liked post with id = ' + post_id);

            });
        </script>

Answer 1

这是因为 jquery 没有绑定到那些元素（它们最初不在 DOM 中）。而是将其绑定到文档，如下所示：

$(document).on("click", 'button.like-btn', function(event) { 
    alert("new link clicked!");
});

Look here for a little more