在 WooCommerce 结账中针对帐单国家/地区更改运行 javascript 代码

Question

嘿，我正在尝试运行一个函数，并在用户选择美国以外的任何其他国家/地区时显示一条消息。但是，我陷入了困境，因为我什至无法选择框来记录国家/地区更改事件。这是我的代码：

function checkIfInternational(e) {
  console.log(e);
}
const shipCountry = document.querySelector("#billing_country"); //Logs the select box

shipCountry.addEventListener("change", checkIfInternational); // listening for the change event

关于为什么会发生这种情况有什么想法吗？Woocommerce 是否阻止 JS 在页面上运行或发生什么情况？

编辑：JS小提琴： https: //jsfiddle.net/suoc57mg/1/

Answer 1

您需要将您的事件委托给文档正文，否则 WooCommerce 将在结账时阻止您的代码。

由于 WooCommerce JS 代码已使用 jQuery，请尝试以下操作：

jQuery(function($){
    $(document.body).on('change', 'select[name=billing_country]', function(){
        console.log('Country changed: '+$(this).val());
        // Here run your function or code
    });
});

现在应该可以了。