Question

我现在正在学习ajax和jquery，我目前正在开发一个用户可以喜欢/不喜欢帖子的页面，并且所有帖子都会显示加载无限滚动，默认情况下每次都会加载5个帖子，但问题是如果帖子是通过无限滚动加载的话，那么ajax按钮将停止工作。在我做了一些研究后，我知道这是因为没有加载功能。但我无法找到解决方案，有人可以帮助我吗？

这是我的ajax按钮功能

$('.agree').on('click',function(event){
{
    event.preventDefault();
    postId = event.target.parentNode.parentNode.dataset['postid'];
    var isAgree=event.target.previousElementSibling== null;
    $.ajax({
        method:'POST',
        url:urlAgree,
        data:{ isAgree: isAgree,postId:postId,_token:token}
    })
        .done(function() {
            event.target.innerText = isAgree ? event.target.innerText == 'Agree' ? 'You agree this post' : 'Agree' : event.target.innerText == 'Disagree' ? 'You disagree this post' : 'Disagree';
            if (isAgree) {
                event.target.nextElementSibling.innerText = 'Disagree';
            } else {
                event.target.previousElementSibling.innerText = 'Agree';
            }
        });

}

}）;

这是无限滚动功能。

$(document).ready(function() {
$(window).scroll(fetchPosts);

function fetchPosts() {

    var page = $('.endless-pagination').data('next-page');

    if(page !== null && page !== "") {

        clearTimeout( $.data( this, "scrollCheck" ) );

        $.data( this, "scrollCheck", setTimeout(function() {
            var scroll_position_for_posts_load = $(window).height() + $(window).scrollTop() + 100;

            if(scroll_position_for_posts_load >= $(document).height()) {
                $.get(page, function(data){
                    $('.posts').append(data.posts);
                    $('.endless-pagination').data('next-page', data.next_page);
                })

            }
        }, 350))

    }
}

}）;

有没有办法将两种功能结合在一起？

Answer 1

委派您的点击事件

$('.posts').on('click','.agree',function(event){

如果在laravel 5.2

1 个答案: