当DOM中的文本使用jQuery更改时监听的Javascript事件

oxosxuxt  于 2022-12-03  发布在  jQuery
关注(0)|答案(1)|浏览(167)

我正在尝试获取购物车的小计(要访问购物车,您必须从www.example.com单击屏幕的右上角tecnosport.es)。
若要取得小计:

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi");

因为我有3个小部件,所以我得到了3个元素,但是你可以看到值是这样的;

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").text();

**我的目标:**当我向购物车中添加某些产品时,我希望了解小计是否会发生变化以执行某些操作(例如,通过console.log在控制台中查看它)。
我试过了,但没有效果:
**1.**因为我得到了3个元素,所以我应该在循环中迭代它们并侦听事件:

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").bind("DOMSubtreeModified", function(){
    jQuery(this).each(function( index ) {
        console.log("The content changed");
    });
});

**2.**我尝试更改顺序:

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").each(function( index ) {
    jQuery(this).bind("DOMSubtreeModified", function(){
        console.log("The content changed");
    });
});

**一件奇怪的事情:**例如,如果我对某个带有ID的单个元素(而不是3个元素)这样做,它会完美地工作。我迭代错了吗?我很困惑

b4lqfgs4

b4lqfgs41#

可以使用jQuery中的on()方法将事件侦听器绑定到所需的元素,在这种情况下,可以使用keyup事件来侦听元素文本内容的变化。
以下是如何执行此操作的示例:

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").on("keyup", function(){
    console.log("The content changed");
});

请注意,这只适用于使用键盘所做的变更。如果使用其他方式变更文字内容,例如使用innerHTML属性或呼叫JavaScript函数,则不会触发keyup事件。在这些情况下,您可以改用input事件。
下面是如何使用输入事件的示例:

jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").on("input", function(){
    console.log("The content changed");
});

相关问题