javascript - console.log 触发，但后续 Jquery 调用不执行任何操作

Question

这是我的代码:

    jQuery( window ).load( function( ) {
        if ( jQuery('select#pa_form option:selected').val().length > 0 ) {
            if( ! jQuery('div.single_variation').html().length) {
                jQuery('div.single_variation').append("<span class='price'><span class='amount'>$" + jQuery("meta[itemprop=price]").attr('content') + "</span></span>");
            }
            jQuery( 'select#pa_form').change( function() {
                console.log( 'i tried' );
                jQuery('div.single_variation').html("<span class='price'><span class='amount'>$" + jQuery("meta[itemprop=price]").attr('content') + "</span></span>");
            });
        }
    });

我遇到的问题是，当我更改选择时，“我尝试过”的 console.log 语句被触发，但 jQuery .html 调用没有触发。

如果我将以下内容放入控制台，它就会起作用:

        jQuery( 'select#pa_form').change( function() {
            console.log( 'i tried' );
            jQuery('div.single_variation').html("<span class='price'><span class='amount'>$" + jQuery("meta[itemprop=price]").attr('content') + "</span></span>");
        });

但是，如果我从 jQuery( window ).load( function() {}); 函数中删除该代码片段，则不会触发任何操作。

我做错了什么？

Here's a live version of the code

Answer 1

您的代码正确显示了价格，但还有另一个 change由 wooCommerce JS 绑定(bind)的事件处理程序被触发，最终再次清除价格。

让这个工作的最简单的方法是 hacky，但可以完成工作。只需使用 setTimeout() 推迟更新即可延迟 0 允许首先触发其他更改处理程序，然后再执行您想要执行的操作。我建议这样做只是因为我认为 wooCommerce JS 太难更改。

这是一种方法:

jQuery( window ).load( function( ) {
    if ( jQuery('select#pa_form option:selected').val().length > 0 ) {
        if( ! jQuery('div.single_variation').html().length) {
            addPrice('append');
        }
        jQuery( 'select#pa_form').change( function() {
            console.log( 'i tried' );
            addPrice('html');
        });
    }
});

function addPrice(method) {
    setTimeout(function () {
        jQuery('div.single_variation')[method]("<span class='price'><span class='amount'>$" + jQuery("meta[itemprop=price]").attr('content') + "</span></span>");
    }, 0);
}

我还使代码更加干燥，以便更容易维护。

我是如何发现问题的

以下是我在 Chrome 开发工具中发现问题的方法，以便您可以了解如何自行解决。

1. 在进行更改的行(console.log('i tried') 行之后的行)设置一个断点。
2. 更改下拉列表，会命中断点。
3. 跨过一次(F10)，回头在浏览器中查看，价格已经出现。到目前为止，一切顺利。
4. 恢复 (F8)，它会再次消失。
5. 在 <div id="desc_bucket"> 上设置 DOM 断点element，我希望更改的元素的父元素。在“元素”选项卡中右键单击它，选择“中断...”和“子树修改”。
6. 再次更改下拉菜单，并在它命中您的代码时恢复 (F8)。
7. 下次出现故障时，将是由于 wooCommerce 代码造成的，您可以在其中探索堆栈跟踪以了解发生了什么情况。

DOM 断点:有时很方便。