woocommerce target button with class after ajax update

Question

I'm working on a eshop using woocommerce.

I have an add to cart button with class "single_add_to_cart_button", and a variations select list with 3 sizes.

When I select a size which is unavailable, my "single_add_to_cart_button" button gets a class added "disabled", and when switching to an available size, then the class is deleted.

I'm trying with jquery to add a function onclick on my button when it has the "disabled" class.

The "disabled" class is added via Ajax by woocommerce itself.

I've found a woocommerce jquery function to check if the variations select list has changed

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

I can add a console.log message to check that my select has changed, that works.

But I can't target the .disabled button. Everytime I change my select list, the click function on my ".disabled" button launch my function.

It seems to me that when my css class has changed, my jquery code doesn't see it.

here is my jquery code :

$( ".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');
    });

});

can anybody help me with this ?

thanks