分页有效，但在重新加载时不会重新附加 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() 。有很多更好的方法可以做到这一点，但这可能会让您继续前进。