在 WooCommerce 购物车页面的 AJAX 调用中未加载 JavaScript答案

【问题标题】：JavaScript not loaded on AJAX call at WooCommerce Cart page在 WooCommerce 购物车页面的 AJAX 调用中未加载 JavaScript
【发布时间】：2020-03-02 15:31:41
【问题描述】：

我正在使用woocommerce_after_shipping_rate 钩子添加我的代码，一些 PHP，一些 JS。在正常页面加载时，我的所有代码都已完美加载。但是，当我在购物车中添加/删除商品，或在运费计算器中更新我的地址时，导致可用运输方式（使用 AJAX）的更新，我的 JS 代码未加载。

可能这只是我错过的一个非常基本的事情。这是我的代码的简单版本：

function abc( $method, $index ) {

    echo "This loaded on AJAX just fine";

    echo "<script type='text/javascript'>";
    echo "var a = 'This is NOT loaded on AJAX call, along with the tags above and below this';";
    echo "</script>";

    echo "This also loaded on AJAX just fine";

}
add_action( 'woocommerce_after_shipping_rate', 'abc', 10, 2 );

如果有人想知道，我的 JS 代码是在页面标题处放置一些我的 JS 函数需要的变量。这些变量基于当前加载的可用运输方式。

我希望可以实现的是我的 JS 代码也可以加载到 AJAX 上。

感谢任何帮助。谢谢。

【问题讨论】：

“这不是在 AJAX 调用中加载的”是什么意思？ <script> 标签是否不存在于响应中？它是否存在，但未添加到 DOM 中？还是它存在，添加到 dom 中，但没有执行？
另外，与问题无关，但您忘记了}
@jrswgtr 是的，当 AJAX 完成加载时，这 3 行不存在。从。上面和下面这 3 行加载得很好。是的，我错过了一个}，谢谢。
也许这些行被发送到浏览器，但你看不到它们，因为没有添加到 DOM，将输出记录到控制台，我几乎可以肯定脚本标签会在那里.
@Triby 嘿，你是对的！我检查了网络选项卡的响应有效负载，<script type='text/javascript'> 在那里，以及内容。我不明白，这是怎么回事？为什么没有加载到 DOM 中？？

标签： php ajax wordpress woocommerce

【解决方案1】：

可能更多的是“破解”而不是答案。

基本上问题是任何使用<script> 标签的东西都没有加载到DOM（但实际上是从服务器发送到浏览器的）。所以我把<script>改成<div style='display:none;'>，保持内容不变（还是用JS填充）。

function abc( $method, $index ) {

    echo "This loaded on AJAX just fine";

    echo "<div class='response-div' style='display:none;'>";
    echo "var a = 'This is where you echo all your JS';";
    echo "</div>";

    echo "This also loaded on AJAX just fine";

}
add_action( 'woocommerce_after_shipping_rate', 'abc', 10, 2 );

然后在window.load 和document.ajaxComplete 上，我从<div> 复制innerHTML 并创建一个新的<script> 元素到REPLACE <div>，包含相同的innerHTML。

这个答案https://stackoverflow.com/a/20584396/10069015 有替换功能，但是针对整个页面。我只需要修改它以适应我的需要。

像这种声音一样愚蠢，但它确实有效。请注意，我的目标只是编写一些全局 JS 变量，而不是实际执行 JS 函数。所以我不知道如果你想这样做，这个方法是否有效。

【讨论】：