在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/

- Sackadelic

---

元素ID为#billing_country的内部内容是什么？这是默认选择还是其他什么？ - Kishieel

这是一个带有国家选项的默认选择框。 - Sackadelic

为什么你要定义const（常量）而不是var（变量）？ - Vincenzo Di Gaetano

这是一个小的JS文件，仅用于一些基本的结账页面自定义。为什么建议使用旧的“var”？ - Sackadelic

你在哪里使用你的代码？我猜是在WooCommerce结账页面，对吗？ - LoicTheAztec

Answer 1

如果你想在 WooCommerce 结账流程中使用代码，你需要将事件委托给文档主体，否则 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
    });
});

现在应该可以正常工作了。

- LoicTheAztec

---

是的！非常感谢，Loic！WooCommerce是否有意为了安全目的而阻止JS代码运行？ - Sackadelic

@Sackadelic，不过在WooCommerce中已经有很多委托事件可以接管你的手了。 - LoicTheAztec

Answer 2

假设您的 #billing_country 元素长这样：

 <select id="billing_country">
    <option value="US">United State</option>
    <option value="PL">Poland</option>
    <option value="DU">Germany</option>
    <option value="ES">Estonia</option>
    <option value="RU">Mather Russia</option>
 </select>

你可以通过处理事件的目标值来检查它的值，方法如下。

document.getElementById("billing_country")?.addEventListener("change", (event) => {
  if (event.target.value !== "US") {
    // not united state :(
  }
});

- Kishieel

---

问题在于更改事件上根本没有运行任何代码。我也尝试了你的方法，但是控制台没有记录任何内容。 - Sackadelic

你确定 #billing_country 存在吗？你能提供一份最小化的代码复制版本，以便我们更好地解决你遇到的问题吗？ - Kishieel

我做了一个带有 JS fiddle 链接的编辑。然而，它在 JSF 中可以工作...所以有些东西阻止代码在 Woo 上运行？ - Sackadelic

你要么没有将脚本链接到页面，要么是选择元素在脚本执行后才被创建。请确保你的脚本在整个 body 内容之后。 - Kishieel

这是可以的，我可以像正常刷新页面一样记录选择框。如果我首先加载JS文件，它就会出错。 - Sackadelic