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>");
            });
        }
    });

我遇到的问题是，当我更改select时，“我试过”的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绑定，最终会再次清除价格。

实现这一目标的最简单方法是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开发工具中发现问题的方法，以便您自己学习如何操作。

在进行更改的行（console.log('i tried')行后面的那一行）设置断点。
更改下拉列表，断点被点击。
跳过一次（F10），回头看看浏览器，价格已经出现。到目前为止，这么好。
恢复（F8），它会再次消失。
在<div id="desc_bucket">元素上设置DOM断点，该元素是我希望更改的元素的父元素。在Elements选项卡中右键单击它，选择“Break on ...”和“Subtree modification”。
再次更改下拉列表，并在命中代码时恢复（F8）。
下次中断时，将会因为wooCommerce代码，您可以在其中探索堆栈跟踪以找出正在发生的事情。

DOM断点：有时候很方便。

fire.log触发，但后续的Jquery调用没有做任何事情

1 个答案:

我是如何找到问题的