如何处理具有 WordPress 脚本依赖项的动态加载 AJAX 内容的 JavaScript 重新初始化？

Question

我通过 AJAX 动态加载内容并将其附加到前端。虽然内容加载成功，但为新加载的元素初始化 JavaScript 功能时会出现问题，特别是在脚本具有依赖项的 WordPress 环境中。

我尝试过的：

从 AJAX 响应中提取并注册脚本： 我尝试从 AJAX 响应中提取所有标签，并使用以下方法一一动态加载它们：

$.ajax({
    url: 'your-endpoint',
    success: function(data) {
        const content = $(data);
        $('#content-container').html(content);

        // Extract scripts and reinitialize
        content.find('script').each(function() {
            const script = document.createElement('script');
            script.src = $(this).attr('src') || '';
            script.text = $(this).html();
            document.head.appendChild(script);
        });
    }
});

这种方法在某些情况下有效，但在 WordPress 中，许多脚本依赖于通过 wp_enqueue_script 注册的依赖项。如果这些依赖项没有正确排队，我会遇到如下错误：

ReferenceError: wp is not defined

我的问题： 如何正确处理 WordPress 中动态加载的 AJAX 内容的 JavaScript 初始化，确保解决所有依赖项？

有没有一种方法可以自动重新注册或重新初始化 WordPress 脚本（及其依赖项）以动态加载内容，而无需事先手动将它们排队？

我正在寻找符合 WordPress 最佳实践的可扩展解决方案。

Answer 1

在 jQuery 中，你可以像这样处理动态加载的内容

jQuery(document).on('click' , '.dynamic-content-class' , function(){
 // your logic here
});

将动态内容类替换为你的类

您可以像这样在动态内容上添加事件处理程序