Can't add Select2 to select in variable product (admin)

Question

I'm trying to add select2 to an input in WooCommerce variable product admin.

I've added select2 to a class so it can be reused, however, it seems it's not working. It's working anywhere else on the page, but not in the variations meta box.

My initial theory was that the variations load when clicked from the product data container, so I found this event woocommerce_variations_loaded and binded a function here that then applied the select2 - but it didn't work.

So, I'm back to square one. What am I doing wrong, and how can I get this to work?

(function($) {
    "use strict";

    $('.select2').select2();

    $('#woocommerce-product-data').on('woocommerce_variations_loaded', function(event) {
        $('.select2').select2();
    });

})( jQuery );

Any ideas? TIA.

Answer 1

Can you try this?

(function($) {
    "use strict";

    $('.select2').select2();

    $(document).on('woocommerce_variations_loaded', function(event) {
        $(document).find('.select2').select2();
    });

})( jQuery );

Not tested. Thanks