Question

以下代码目前已上传至https://katiedeanjewel.staging.wpengine.com/checkout/#。它以结帐页面为目标。

请注意，如果购物车中没有商品，则不会加载结帐内容。

当我将这个确切的代码复制/粘贴到我的控制台时，没关系。

当它在服务器上时（在WordPress网站上），事件事件侦听器不会触发。 trigger元素已被严格记录，因此脚本运行正常。

我做错了什么？

(function() {
console.log("lux_script.js");

var trigger = $("#billing_continue");
console.log(trigger);

$(trigger).on("click", function() { shippingScript() } );


function shippingScript() {
    console.log("ShippingScript");

    var select = $("#shipping_country")[0];
    var shipping = $("#shipping_option_select select")[0];

    //international shipping option 
    var world = $(shipping).children("option[value='woocommerce_flatrate_percountry']")[0];

    // domestic shipping options
    var shipOpts = $(shipping).children("option:not([value='woocommerce_flatrate_percountry'])");
    shipOpts = $.makeArray(shipOpts);

    function showDomestics() {
        console.log("showDomestics");
        $(shipOpts).show();
    }

    function hideDomestics() {
        console.log("hideDomestics");
        var _select = $("#shipping_country")[0];
        $(shipOpts).hide();
        var selected = $(_select).children("option:selected")[0];

        if ( $.inArray(selected, shipOpts) ) {
            $(selected).removeAttr("selected");
            $(world).attr("selected", "selected");
        } else {
            console.log("not in array");
        }
    }

    $(select).on("change", function() {
        console.log("changing to a different country")
        var selected = $(this).children("option:selected");

        $(selected).val() === 'US' ? showDomestics() : hideDomestics();
    });
}

})();

Answer 1

在您的页面上找不到触发器，尝试在控制台中运行：

$("#billing_continue").length

它返回0，表示该元素不存在。

此外，检查您是否未被重定向到： http://katiedeanjewel.staging.wpengine.com/cart/#

如果动态加载ID为billing_continue的对象，则应使用：

$(document).on("click", "#billing_continue", function() { shippingScript() } );

Answer 2

确保以下面为WordPress脚本包含的格式包装所有代码。

xmlns=\"(.*?)\"

上传到服务器时JavaScript未正确调用

2 个答案: