（已解决）AJAX .load() 页面导航后样式损坏答案

【问题标题】：(Solved) Styles Broken After AJAX .load() Page Navigation（已解决）AJAX .load() 页面导航后样式损坏
【发布时间】：2021-06-28 04:56:43
【问题描述】：

我使用QuantumCloud 的chatbot theme 构建了一个wordpress 站点，我想在页面导航的意义上对其进行ajaxify，而无需刷新页面（动态页面加载）。我已经实施了一个主要工作的解决方案，但它附带了一个我正在努力弄清楚的警告。当我关注网站上的内部链接时，所需的内容会正确加载到目标 div 中而无需任何页面刷新，但至少某些 CSS 样式，以及可能还有某些 JS 处理程序和侦听器，会中断（动态加载的内容宽度很大较小的视差效果，例如鼠标跟踪和背景图像上的滚动效果被破坏等）。我正在寻找一种解决方案，可以防止这种损坏，或者如果损坏是不可避免的，那么我可以在加载新内容后重新实现相关的样式和/或处理程序/侦听器。

这是我的设置：

在子主题（/wp-content/themes/chatbot-theme-child/）中，我使用以下文件设置 assets/js 目录：

jquery.ba-hashchange.min.js 为了与更高版本的 jQuery 兼容，我对这个脚本进行了修改。我在该脚本中将“$.browser.msie”更改为“$.support.msie”
ajaxify-chatbot-theme.js（灵感来自this tutorial）

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.load( finalUrl, function() {
            $ajaxSpinner.fadeIn();
            $mainContent.animate( { opacity: '0' } );
            history.replaceState( null, null, url );
            $mainContent.animate( { opacity: '1' } );
            $ajaxSpinner.fadeOut();
        } );
    } );

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

为了将脚本注册到 WordPress 主题，我将以下内容附加到聊天机器人子主题的 functions.php 中：

if ( ! is_admin() ) {
    $url = get_stylesheet_directory_uri() . "/assets/js/";
    wp_enqueue_script( "hash-change", "{$url}jquery.ba-hashchange.min.js", array( "jquery" ), '', true );
    wp_enqueue_script( "ajaxify-chatbot-theme", "{$url}ajaxify-chatbot-theme.js", array( "hash-change" ), '', true );
}

上述步骤的结果是我在第一段中描述的行为，其中动态内容加载工作（无页面刷新），但导航后样式被破坏。我看到很多人建议使用 $(this).trigger("create");在传递给 .load() 的函数中，许多人声称这个解决方案对他们有用（我不明白它的作用或为什么它会或不会起作用），但它对我没有任何作用。我想我可能需要一种在动态内容加载后重新加载损坏的样式或 JS 的方法，但我不确定如何确定哪些样式或 JS 丢失了。理想情况下，我想知道是否有一种解决方案可以从一开始就完全防止样式破坏。

作为次要问题，我还注意到，当我单击内部链接时，新动态加载的内容会立即显示一瞬间，然后淡出并显示微调器图形，然后又淡入。这使得内容似乎闪烁，我不完全确定如何防止这种情况以实现更顺畅的过渡。微调器和淡出应该在内容更改之前或之时稍微发生，但它似乎在内容更改之后触发非常轻微，并且很明显。

如果我应该提供任何其他信息，请告诉我。我也对“哟，我有比这更好的方式来处理 ajaxifying wordpress”这样的解决方案持开放态度。我面临着尽快启动这个网站的压力，我觉得有点卡住了，所以非常感谢任何帮助或建议。

更新：我已经弄清楚了导致样式损坏的原因，以及为什么我在网上找到的解决方案对我不起作用。我只是在查看 DOM，想看看我是否可以在 .load() 事件之后捕捉到样式更改，或者根本没有任何线索，但我并没有真正找到任何东西。直到我终于注意到，在将新内容动态加载到...中的 .load() 事件发生之后，结构变成了...。这意味着我试图将动态加载的内容放入的顶级 div 也包含在动态加载的内容中，这显然会破坏样式。我现在对自己很用力，因为这个错误花了我几个小时哈哈。无论如何，在我修复了我的代码并更正了这个问题之后，我将继续提交它作为这篇文章的答案，然后将其标记为已解决（我已经继续并将其标记为现在已诊断）。

【问题讨论】：

即使手动或动态添加HTML也无需刷新CSS，我相信样式问题与HTML元素选择器有关！可以分享一下你的网址吗？
微调器由 Jquery 侦听器触发，每次页面加载/构建页面内容或发出 Ajax 请求时，都会显示微调器。解决方案：当您动态加载内容时，您可以制作一个覆盖整个页面的自定义 Spinner，这样用户就不会看到任何 intureption。
网址是strangequark.games。
无论微调器是否跨越整个页面，问题是微调器在内容更改发生之前的 .load() 调用期间未触发，但稍晚一些。因此，您会看到内容发生变化，然后微调器启动，内容不透明度短暂变暗。这不是使用哪种微调器的问题。
对于微调器，您可以使用这个简单的 jquery 代码； $('.loader').show() 在检索内容时显示微调器，并使用 $('.loader').hide() 在函数完成时隐藏微调器。

标签： jquery ajax wordpress

【解决方案1】：

为了防止样式破坏，我必须在原帖中发布的代码中修复如下：

我变了

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

到

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

这样做是将 .floating-content 的子项填充到 .floating-content 中，而不是将 .floating-content 填充到 .floating-content 中，这会破坏样式。

我确实提到了其他几个问题，即视差效果在 .load() 事件之后中断，以及微调器和内容动画激活有点晚并导致不希望的闪烁效果的问题。我仍然需要解决这些问题，但我将继续为这些问题单独发帖。在我发布这些帖子后，我会将它们链接到此处，以防任何偶然发现此帖子的人对这些问题感兴趣。

【讨论】：