Работа с событиями через BX.bind в 1С-Битрикс

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/header.php'); ?>
<div id="color-changer">
    <button data-color="red">Красный</button>
    <button data-color="green">Зеленый</button>
    <button data-color="blue">Синий</button>
    <div id="color-display" style="width: 100px; height: 100px; border: 1px solid black;"></div>
</div>
<script>
    // Проверяем, загружен ли BX
    if (typeof BX === 'undefined') {
        console.error('BX не определен. Проверьте загрузку ядра Битрикс.');
    } else {
        BX.ready(function() {
            console.log('BX загружен и готов');

            // Проверяем существование элементов
            var changer = BX('color-changer');
            var display = BX('color-display');

            if (!changer) {
                console.error('Элемент color-changer не найден');
                return;
            }
            if (!display) {
                console.error('Элемент color-display не найден');
                return;
            }

            // Добавляем обработчик с проверками
            BX.bind(changer, 'click', function(e) {
                var target = e.target || e.srcElement;
                if (target.tagName === 'BUTTON') {
                    var color = target.getAttribute('data-color');
                    if (color) {
                        console.log('Изменение цвета на:', color);
                        display.style.backgroundColor = color;
                    } else {
                        console.error('Атрибут data-color не найден');
                    }
                }
            });

            console.log('Обработчик событий установлен');
        });
    }

    // Добавляем резервный обработчик на чистом JS на случай проблем с BX
    document.addEventListener('DOMContentLoaded', function() {
        var changer = document.getElementById('color-changer');
        if (changer) {
            changer.addEventListener('click', function(e) {
                if (e.target.tagName === 'BUTTON') {
                    var color = e.target.getAttribute('data-color');
                    var display = document.getElementById('color-display');
                    if (display && color) {
                        display.style.backgroundColor = color;
                    }
                }
            });
        }
    });
</script>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/footer.php'); ?>