Question

我正在使用woocommerce在电子商店工作。

我有一个带有＆＃34; single_add_to_cart_button＆＃34;的添加到购物车按钮，以及一个包含3种尺寸的变体选择列表。

当我选择一个不可用的尺寸时，我的＆＃34; single_add_to_cart_button＆＃34;按钮获取一个类添加＆＃34;禁用＆＃34;，当切换到可用大小时，该类将被删除。

我正在尝试使用jquery在我的按钮上添加一个功能onclick，因为它有＆＃34;禁用＆＃34;类。

＆＃34;禁用＆＃34;类是由woocommerce本身通过Ajax添加的。

我找到了一个woocommerce jquery函数来检查变体选择列表是否已更改

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {

我可以添加一个console.log消息来检查我的选择是否已更改，这是有效的。

但是我无法定位.disabled按钮。每当我更改我的选择列表时，我的＆＃34; .disabled＆＃34;上的点击功能按钮启动我的功能。

在我看来，当我的css类发生了变化时，我的jquery代码并没有看到它。

这是我的jquery代码：

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {

console.log("change");

   $(".single-product .single_add_to_cart_button.disabled").click(function(){
      $('#modal_commander').modal('show');
    });

});

任何人都可以帮我这个吗？

感谢

Answer 1

不要将事件绑定到另一个事件中，您将导致所谓的多事件绑定，在这种情况下，每次选择更改时都会绑定一个新的事件处理程序。

相反，在任何事件回调之外的$(document).ready()内或<body>的底部添加此部分。它只会绑定一次事件。

$("body").on("click", ".single-product .single_add_to_cart_button.disabled", function() {
  $('#modal_commander').modal('show');
});

Answer 2

只需使用此代码即可。干净利落。当按钮具有.disabled类并且您单击它时，该函数将执行。

$(document).on("click", ".single-product .single_add_to_cart_button.disabled", function(){
    $('#modal_commander').modal('show');
});

ajax更新后带有类的目标按钮

2 个答案: