Question

如果有人可以帮助我，我将面临两个问题。

当我尝试点击加载更多按钮时第一次附加重复.blog-post但在第二次点击时它可以正常工作。
在快速点击或双击时，它会一次又一次地复制相同的帖子。

// AJAX Load More Blog Posts
    function AJAXLoadMorePosts(){
        $('.load-more-posts').click(function(e){

            e.preventDefault();

            // Variables
            var element = $(this);
            var target = element.attr('href');
            var post_wrapper = $('.blog-posts-wrapper');                

            // Run AJAX
            $.ajax({
                type: 'GET',
                url: target,
                success: function(data, textStatus, XMLHttpRequest) {                   

                    // Store New Data
                    var new_post_items = $(data).find('.blog-posts-wrapper .blog-post');
                    var next_page_url = $(data).find('.nav-previous a').attr('href');

                    // Update Load More Button Href
                    if (next_page_url) {
                        element.attr('href', next_page_url);
                    } else {
                        element.slideUp();
                    }


                        post_wrapper.append(new_post_items);


                },
                complete: function() {
                    element.html(loadingTextOrg);
                },
                error: function(MLHttpRequest, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });

        });
    }

Answer 1

如上所述，AJAXLoadMorePosts()附加$('.load-more-posts')点击处理程序，有两个后果：

在第一次调用AJAXLoadMorePosts()之前，不会附加任何点击处理程序。
在后续通话中AJAXLoadMorePosts()会附加越来越多的点击处理程序，这是非常不受欢迎的。

解决方案是将点击处理程序附加到所有相关元素一次（或委托给包装元素）。

您还需要确保点击处理程序执行测试，以便在ajax请求尚未进行时仅执行ajax。

这样的事情应该这样做。

// AJAX Load More Blog Posts
$('.load-more-posts').text(loadingTextOrg).on('click', function(e) {
    e.preventDefault();
    var $element = $(this);
    if($element.text() == loadingTextOrg) {
        var $element = $(this).text(somethngElse);
        $.get($element.attr('href')).then(function(data, textStatus, XMLHttpRequest) {
            var next_page_url = $(data).find('.nav-previous a').attr('href');
            if (next_page_url) {
                $element.attr('href', next_page_url);
            } else {
                $element.slideUp();
            }
            $('.blog-posts-wrapper').append($(data).find('.blog-posts-wrapper .blog-post'));
        }, function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }).always(function() {
            $element.text(loadingTextOrg);
        });
    }
});

首次附加重复

1 个答案: