WordPress使用AJAX .load()无刷新导航后样式与JS功能失效问题咨询

根本原因 #

你当前的实现仅拉取了.floating-content节点的HTML内容，原主题中依赖DOM ready事件绑定的监听器、针对特定DOM节点计算的样式（比如视差、元素宽度计算），只会在页面首次加载时执行一次，新插入的DOM没有经过这些逻辑处理，自然会出现样式异常、交互失效。

解决方法 #

方案1：手动触发主题初始化逻辑 #

1. 打开原主题的主JS文件（一般在/wp-content/themes/chatbot-theme/assets/js/目录下，找命名类似main.js、theme.js、app.js的文件），找到页面加载完成后执行的初始化逻辑，通常包裹在jQuery(document).ready()或者$(function(){})内部，比如视差初始化代码为$('.parallax').parallax()，交互监听器绑定代码类似$('.hover-card').on('mouseenter', function(){...})。
2. 把这些零散的初始化逻辑抽成一个独立的公共函数，比如命名为themeInit()，原页面ready的时候调用一次，动态内容加载完成的回调里再调用一次即可。
3. 如果你找不到对应的初始化函数，可以用以下通用兜底方案：
   • 样式类问题：如果是动态元素的宽度计算类异常，在load回调里手动触发一次窗口resize事件即可，绝大多数响应式、自适应计算逻辑都会监听resize事件：$(window).trigger('resize')
   • 事件监听器类问题：原主题如果是直接绑定在元素上的监听器，改成事件委托绑定到document上就可以兼容动态元素，比如把$('.btn').on('click', function(){})改成$(document).on('click', '.btn', function(){})
   • 第三方组件初始化问题：比如视差、滚动动画这类，在回调里重新执行对应的初始化方法即可，示例：

   $mainContent.load(finalUrl, function() {
       // 重新初始化视差
       $('.parallax-element').parallax()
       // 重新初始化鼠标跟踪效果
       initMouseTracker()
       // 触发resize修正宽度计算
       $(window).trigger('resize')
       // 剩下的你原来的动画逻辑
   })
   

方案2：更稳定的WordPress Ajaxify实现方式 #

弃用当前的hashchange+jQuery load的方案，改用成熟的轻量WP ajax导航插件，只需要配置内容选择器和菜单选择器即可，不需要手动写JS逻辑，对主题的兼容性更好。

你现在的动画逻辑写在load的回调里，也就是内容已经加载完成插入到DOM之后才开始执行淡出和加载动画，自然会先闪现新内容。调整执行顺序即可：点击链接后先执行淡出、显示加载动画，等内容加载完成之后再插入DOM、淡入，隐藏加载动画。
修改你的ajaxify-chatbot-theme.js代码如下：

jQuery( function( $ ) {
    var $mainContent = $( ".floating-content" ),
        siteUrl = "https://" + top.location.host.toString(),
        url = '',
        $ajaxSpinner = $( ".loader" );

    $( document ).delegate( "a[href^='" + siteUrl + "']", "click", function() {
        location.hash = this.pathname;
        return false;
    } );

    $( ".search-field" ).submit( function( e ) {
        location.hash = "?s=" + $( ".search-field" ).val();
        e.preventDefault();
    } );

    $( window ).bind( "hashchange", function() {
        url = window.location.hash.substring( 1 );

        if ( !url ) {
            return;
        }

        var finalUrl = url + " .floating-content";

        // 先执行旧内容淡出、显示加载动画
        $mainContent.animate( { opacity: '0' }, function() {
            $ajaxSpinner.fadeIn();
            // 动画完成后再加载内容
            $mainContent.load( finalUrl, function() {
                history.replaceState( null, null, url );
                // 加载完成后隐藏动画、新内容淡入
                $ajaxSpinner.fadeOut(function() {
                    $mainContent.animate( { opacity: '1' } );
                    // 这里放主题重新初始化逻辑
                    $(window).trigger('resize')
                    // 其他组件初始化代码写在这里
                });
            } );
        });
    } );

    $( window ).trigger( "hashchange" );
} );

调整后切换流程会变成：旧内容淡出→显示加载中→加载新内容→隐藏加载中→新内容淡入，完全不会出现新内容提前闪现的问题，过渡非常流畅。

内容的提问来源于stack exchange，提问作者gluonman