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

【问题标题】：target button with class after ajax updateajax更新后带有类的目标按钮
【发布时间】：2017-02-22 18:13:17
【问题描述】：

我正在使用 woocommerce 开发电子商店。

我有一个“single_add_to_cart_button”类的添加到购物车按钮，以及一个包含 3 种尺寸的变体选择列表。

当我选择一个不可用的尺寸时，我的“single_add_to_cart_button”按钮会添加一个“禁用”的类，当切换到可用尺寸时，该类会被删除。

我正在尝试使用 jquery 在我的按钮上添加一个功能 onclick 当它具有“禁用”类时。

“禁用”类是由 woocommerce 本身通过 Ajax 添加的。

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

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

我可以添加一条 console.log 消息来检查我的选择是否发生了变化。

但我无法定位 .disabled 按钮。每次我更改选择列表时，“.disabled”按钮上的单击功能都会启动我的功能。

在我看来，当我的 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');
    });

});

谁能帮我解决这个问题？

谢谢

【问题讨论】：

标签： jquery ajax wordpress woocommerce onchange

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：