Question

我使用无限滚动来加载帖子，并尝试为每个需要小型jquery脚本的帖子集成自定义按钮。我的问题是我在ajax加载帖子中成功后直接添加了这个Jquery。但是当我加载例如3.页面时，我的jquery脚本执行两次，而在第二页的帖子上，lke按钮无法正常工作。我怎么处理这个？如果我在ajax请求之后不执行代码并且只在全局调用此jquery代码，那么类似的按钮在ajax无限滚动的新加载的帖子中不起作用。也许我需要停止之前的例子，例如loadin 3.页面通过ajax无限滚动但是怎么样？这是我的代码：

function load_more_posts(selector){
    var url = $(selector).attr('href');
    var data;
    loading = true;

    $.ajax({
        url: url,
        data: data,
        success: function( data ) {

            var $items = $( '.loading-content .item', data );
                $new_anchor = $( selector, data );
                $items.addClass('hidden');

            if ( $('#cooked-plugin-page .result-section.masonry-layout .loading-content').length ){
                $( '.loading-content').isotope( 'insert', $items );

            } else {
                $( '.loading-content').append($items);
                setTimeout(function() {
                    $items.removeClass('hidden');
                }, 200);
            }

            if($new_anchor.length) {
                $(selector).attr('href', $new_anchor.attr('href'));
            } else {
                $(selector).remove();
            }

    loading = false;

            $('.like-btn').each(function() {
        var $button      = $(this),
            $icon        = $button.find('> i'),
            likedRecipes = $.cookie('cpLikedRecipes'),
            recipeID     = $button.attr('data-recipe-id');
            cookied      = $button.attr('data-cookied');
            userLiked    = $button.attr('data-userliked');

        if ( cookied == 1 && typeof likedRecipes !== 'undefined' && likedRecipes.split(',').indexOf(recipeID) > -1 || userLiked == 1 ) {
            $icon.removeClass('fa-heart-o').addClass('fa-heart');
        }

    });

    $('#cooked-plugin-page .like-btn').on('click', function() {
        var $button      = $(this),
            $icon        = $button.find('> i'),
            $count       = $button.find('.like-count'),
            count        = parseInt($count.text()),
            likedRecipes = $.cookie('cpLikedRecipes'),
            recipeID     = $button.attr('data-recipe-id'),
            cookied      = $button.attr('data-cookied'),
            likeURL      = $button.attr('href'),
            likeAction;

        if ( $icon.hasClass('fa-heart-o') ) {
            $icon.removeClass('fa-heart-o').addClass('fa-heart');
            count++;

            if (cookied == 1){
                if ( typeof likedRecipes === 'undefined' ) {
                    likedRecipes = recipeID;
                } else {
                    likedRecipes = likedRecipes + ',' + recipeID;
                }

                $.cookie('cpLikedRecipes', likedRecipes, { expires: 365 } );
            }

            likeAction = 'like';
        } else {
            $icon.removeClass('fa-heart').addClass('fa-heart-o');
            count--;

            if (cookied == 1){
                if ( typeof likedRecipes === 'undefied' ) {
                    return false;
                }
            }

            if (cookied == 1){
                var likedSplit = likedRecipes.split(','),
                    recipeIdx  = likedSplit.indexOf(recipeID);

                if ( recipeIdx > -1 ) {
                    likedSplit.splice( recipeIdx, 1 );
                    likedRecipes = likedSplit.join(',');

                    $.cookie('cpLikedRecipes', likedRecipes, { expires: 365 } );

                    likeAction = 'dislike';
                }
            } else {
                likeAction = 'dislike';
            }

        }

        $.ajax({
            'url' : likeURL,
            'data': {
                'action'    : 'cp_like',
                'likeAction': likeAction
            },
            success: function(data) {
                $count.text(data);
            }
        });

        return false;
    });

    $('#cooked-plugin-page .tab-links a').on('click', function() {
        var tab = $(this).attr('href');

        if ( !$(this).is('.current') ){
            $(this).addClass('current').siblings('.current').removeClass('current');
            $('#cooked-plugin-page.fullscreen .tab').removeClass('current');
            $(tab).addClass('current');
            $win.scrollTop(0);
        }

        return false;
    });

    if($('.rating-holder').length) {
        $('.rating-holder .rate')
            .on('mouseenter', function() {
                var $me = $(this);
                var $parent = $me.parents('.rating-holder');
                var my_index = $me.index();
                var rated = $parent.attr('data-rated');
                $parent.removeClass(function(index, css) {
                    return (css.match (/(^|\s)rate-\S+/g) || []).join(' ');
                });
                $parent.addClass('rate-' + (my_index + 1));
            })
            .on('mouseleave', function() {
                var $me = $(this);
                var $parent = $me.parents('.rating-holder');
                var my_index = $me.index();
                var rated = $parent.attr('data-rated');
                $parent.removeClass(function(index, css) {
                    return (css.match (/(^|\s)rate-\S+/g) || []).join(' ');
                });
                if(rated !== undefined) {
                    $parent.addClass('rate-' + rated);
                }
            })
            .on('click', function() {
                var $me = $(this);
                var $parent = $me.parents('.rating-holder');
                var my_index = $me.index();
                $('.rating-real-value').val(my_index + 1);
                $parent.attr('data-rated', my_index + 1);
                $parent.addClass('rate-' + (my_index + 1));
            });
    }   

            setTimeout(function() {
                masonry();
            }, 500);

        }
    });

}

Answer 1

有一个很棒的滚动插件。他有诸如Bund，unbind，destroy和e.t.c之类的方法：

https://github.com/infinite-scroll/infinite-scroll#methods

如何在无限滚动中处理javascript的执行？

1 个答案: