jquery - 无法让 onchange() 在 woocommerce 中工作

Question

我正在尝试检测账单国家/地区下拉框中的值是否在 woocommerce 结帐字段中发生了变化。如果它已经改变，获取用户选择的国家的值(value)，然后做一些事情。

为此，我使用如下 jquery 代码:

    $('#billing_country').on('change',function() {
        alert(this.value);
        // do something like alerting users that the book can not be shipped to the selected country.
    });

下面是我在 woocommerce 的结帐表单页面中找到的 HTML 代码。

    <select id="billing_country" class="country_to_state country_select " name="billing_country" tabindex="-1" title="Country *" style="display: none;">
    <option value="">Select a country…</option>
    <option value="AX">Åland Islands</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option> 
    ...

上面代码的问题是，当我从下拉框中选择不同的国家时，什么也没有发生。

非常感谢您

Answer 1

查看此回复:Run javascript code on billing country change in WooCommerce checkout

您需要将事件委托(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
    });
});