AJAX调用后jQuery设置的样式消失问题的排查与解决咨询

我希望通过jQuery给产品颜色筛选器设置的样式，在AJAX请求完成后依然能生效。当前筛选器有「应用筛选」和「清除筛选」两个操作选项，只要点击任意一个选项，之前通过jQuery设置的样式就会失效。
我最初尝试用ajaxComplete函数解决这个问题，但实际测试后没有生效。

add_action( 'wp_head', function () { ?>

    <script>
       var my_colours = function ( $ ) {            
          
       jQuery('.bapf_body ul > li').each(function() {
        var getCol = jQuery('input', jQuery(this)).data('name');
        var imageUrl = "https://website/wp-content/uploads/2021/10/" + getCol + ".jpg";
       jQuery(".bapf_img_span", jQuery(this)).css('background-image', 'url("' + imageUrl + '")');
        console.log('CSS background-image =', jQuery(".bapf_img_span", jQuery(this)).css('background-image'));  
});
       }
</script>
<?php }, 5 ); 

add_action( 'wp_footer', 'cv_theme_custom_script', 999999 );
function cv_theme_custom_script() { ?>
<script>
    jQuery( document ).ready( function ( $ ) {
        my_colours( $ );
    } );
</script>
<?php
}


add_action( 'wp_head', function () { ?>
    <script>
    
    $.ajaxComplete(function () {
        // trigger the other JS snippet again after AJAX.
        my_colours( $ );
    });
    
    </script>
    <?php }, 9999999 );

问题出在ajaxComplete的调用格式不符合规范：

1. jQuery的ajaxComplete事件需要绑定到document对象上，才能全局监听所有AJAX请求完成事件
2. WordPress默认开启jQuery无冲突模式，直接使用$别名会因为未定义导致脚本报错失效
   正确写法如下：

jQuery( document ).ajaxComplete(function () {
    // AJAX请求完成后重新执行样式设置逻辑
    my_colours( jQuery );
});

内容的提问来源于stack exchange，提问作者mir