当 WooCommerce 更新 DOM 时如何重新加载我的代码？答案

【问题标题】：How to reload my code when WooCommerce updates the DOM?当 WooCommerce 更新 DOM 时如何重新加载我的代码？
【发布时间】：2019-05-09 16:55:28
【问题描述】：

我需要在工作的website 上实现少量代码：

window.onload = (function(){
    if ( document.querySelector('input#wc_checkout_add_ons_2.input-text') ){


        console.log("Mailing Code Check Initialized...");

        var submitButton = document.getElementById('place_order')
        var mailingCodeBox = document.querySelector('input#wc_checkout_add_ons_2.input-text');

        submitButton.disabled = true;
        mailingCodeBox.style.border = '2px solid #d83d3d';

        function authenticateInput(){
            if (mailingCodeBox.value == ''){
                mailingCodeBox.style.border = '2px solid #d83d3d';
                submitButton.disabled = true;
            } else {
                mailingCodeBox.style.border = '2px solid #52db6b';
                submitButton.disabled = false;
            }
        }


        mailingCodeBox.addEventListener('input', authenticateInput, false);

        submitButton.addEventListener('click', authenticateInput, false);

    }
}());

本质上，它是在验证 something 已被写入输入框。

WooCommerce 更新了页面和结帐模块，但是，这破坏了我的代码（提交按钮不再能够被我的脚本禁用）。有解决办法吗？ WooCommerce 模块更新后我可以重新加载我的脚本吗？我试过$( document.body ).on( 'updated_cart_totals') 和$( document.body ).on( 'updated_wc_div') 都没有帮助。提前致谢。

【问题讨论】：

一旦 Woo 更新了 DOM，你的绑定就会被放弃/丢失。这并不难克服 - 你只需要了解event delegation。由于 jQuery 在 WordPress / WooCommerce 中无处不在，我可以推荐使用 jQuery，并通过on 学习使用事件委托。
@cale_b 感谢您的回复！有没有办法判断 WooCommerce 正在触发什么事件？正如我所说，我已经用 jQuery 测试了上述函数，但没有成功。
展示你是如何使用 jQuery 进行测试的。 “我已经测试过”不允许我们查看您在做什么、您的绑定方式等。
@cale_b 这可能比我现在的水平更高，基本上我所做的是将我的代码包装在$( document.body ).on( 'updated_wc_div') 中，我想我对这些函数的工作方式有些困惑，认为他们是事件监听器

标签： javascript jquery wordpress function woocommerce

【解决方案1】：

您可以在 woocormerce 完成更新 dom 后运行您的代码，例如：

$(document.body).on('updated_checkout', function(){
    if ( document.querySelector('input#wc_checkout_add_ons_2.input-text') ){


        console.log("Mailing Code Check Initialized...");

        var submitButton = document.getElementById('place_order')
        var mailingCodeBox = document.querySelector('input#wc_checkout_add_ons_2.input-text');

        submitButton.disabled = true;
        mailingCodeBox.style.border = '2px solid #d83d3d';

        function authenticateInput(){
            if (mailingCodeBox.value == ''){
                mailingCodeBox.style.border = '2px solid #d83d3d';
                submitButton.disabled = true;
            } else {
                mailingCodeBox.style.border = '2px solid #52db6b';
                submitButton.disabled = false;
            }
        }


        mailingCodeBox.addEventListener('input', authenticateInput, false);

        submitButton.addEventListener('click', authenticateInput, false);

    }
});

您可以在他们的 js 文件中找到更多这些事件，因为它们没有记录在案。结帐活动见https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/checkout.js

【讨论】：

或者，我可以写jQuery(document.body).on('updated_checkout')吗？因为我需要在页面加载时以一些默认状态开始我的代码，然后在 DOM 更新时在函数中重新加载这些状态。或者我应该用$(window).on('load', function{}) 包裹你写的东西？