javascript on widget form

в виджете есть чекбокс, скрывает или показывает блок ниже его.
через простой js-скрипт.
работает отлично, но до добавления нового виджета.
код скрипта такой:

jQuery(document).ready(function($) {
                
    $('.set_canvasBgColor-<?php echo $randomid; ?>').change(function() {
        if ($(this).is(":checked")) {
            console.log('yes');
            $('#canvasbg-<?php echo $randomid; ?>').show();
        } else {
            $('#canvasbg-<?php echo $randomid; ?>').hide();
            console.log('no');
        }
    });
              
});

так вот в консоли ‘yes’ и ‘no’ работают сразу.
а скрытие и показ блока с '#canvasbg-<?php echo $randomid; ?>' начинает работать только после нажатия кнопки «Сохранить» в виджете.
блок в коде страницы присутствует естественно.

почему это происходит и как это обойти?