javascript - 在 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 Fiddle:https://jsfiddle.net/suoc57mg/1/

Answer 1

您需要将事件委托(delegate)给文档正文，否则 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
    });
});

它现在应该可以工作了。