jQuery .html ('text') срабатывает перед «частичным обновлением», генерируемым этим же кликом, и рассеивает

Question

Вот моя проблема. Я должен показать название цвета объекта, который выбран в prestashop. Когда я пытаюсь выбрать «#something: флажок» и поместить значение цвета в функцию .html (), он работает, но всего за несколько миллисекунд, прежде чем изображение, связанное с изменением цвета. URL меняется, но страница не перезагружается, поэтому «$ (document) .ready ()» снова не запускается. Если я пытаюсь поставить «return false», моя функция jQuery работает отлично, но картина не меняется. Я пытался поставить "setTimeout", но это не сработало. Я ищу с понедельника, но мне трудно понять все технические английские слова. Эта проблема очень тяжелая для меня, поэтому, пожалуйста, мне нужна помощь. Вот страница для примера моей проблемы: https://www.lafabriquedespieds.com/fr/90-cm/50-7197-pied-de-table-90-cm-hairpin-legs.html#/108-hauteur-90_cm/130-reference-blanc

Вот моя последняя попытка jQuery:

    var couleurTextInput = $('.product-variants').children('.product-variants-item:nth-of-type(1)').children('.control-label');

if ($(".input-color:checked")[0]){
    var colorValue = $('.input-color:checked').siblings().children('.sr-only').html();
    couleurTextInput.text('Couleur : ' + colorValue);
}
$(document).on('change', '.input-color:checked' , function() {
setTimeout(function() {
    var newColorValue = $('.input-color:checked').siblings().children('.sr-only').html();
    couleurTextInput.text('Couleur : ' + newColorValue);   }, 16000);
}); 

Большое спасибо за вашу помощь.