分页有效，但在重新加载时不会重新附加 javascript / css 类

Question

我正在构建一个新的个人博客，并使用 ajax 发回 C# 控制器以获取分页结果。第 2 页加载了结果，但是没有重新加载任何 JavaScript，因为我相信，当我部分重新加载页面的分页部分时，它会破坏 DOM 中的所有内容，并且因为整个页面不会重新加载，所以 JavaScript 不会重新加载。 t 调用。

因此，我正在寻找一些帮助来解决如何让外部 javascript 再次运行。它的作用是添加 css 类，提供一些淡入淡出效果等。

      success: function (data) {

                    if (data != null) {

                        var page = data

                        $('#blogsContainer').empty();

                        $('#blogsContainer').replaceWith(page);

所以成功了，我用新数据清除了 blogsContainer。我猜我需要在替换后添加一个函数，然后应用外部 main.js 文件中的所有内容。

main.js 文件如下所示

(function($) {

    var contentWayPoint = function() {

        var i = 0;

        $('.ftco-animate').waypoint( function( direction ) {

            if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {

                

                i++;

                $(this.element).addClass('item-animate');

                setTimeout(function(){

                    $('body .ftco-animate.item-animate').each(function(k){

                        var el = $(this);

                        setTimeout( function () {

                            var effect = el.data('animate-effect');

                            if ( effect === 'fadeIn') {

                                el.addClass('fadeIn ftco-animated');

                            } else if ( effect === 'fadeInLeft') {

                                el.addClass('fadeInLeft ftco-animated');

                            } else if ( effect === 'fadeInRight') {

                                el.addClass('fadeInRight ftco-animated');

                            } else {

                                el.addClass('fadeInUp ftco-animated');

                            }

                            el.removeClass('item-animate');

                        },  k * 50, 'easeInOutExpo' );

                    });

                    

                }, 100);

                

            }

        } , { offset: '95%' } );

    };

    contentWayPoint();

}

使用 ajax 部分重新加载后，如何应用缺少的 css？

我希望这很清楚我想要做什么，但如果没有，请询问。

Answer 1

我认为解决方案可能是在成功回调结束时重新执行 contentWayPoint() 函数。然而，到那时它可能已经超出了范围。有两种简单的方法可以确保它不会：最干净的方法是确保设置分页的代码位于 main.js 中的同一 (function($) {}) 块内 - 这样它将“捕获”该函数。另一种更肮脏的方法是将 var contentWaypoint= function... 更改为 window.contentWaypoint = function - 然后在需要调用它时使用 window.contentWaypoint() 。有很多更好的方法可以做到这一点，但这可能会让您继续前进。