Поскольку вы упомянули, что разметка генерируется Shopify, очень вероятно , что элемент <select>, который вы выбираете, фактически недоступен во время выполнения (то есть он еще не внедрен в DOM ). В этом случае jQuery молча завершается ошибкой, когда не может найти элемент, к которому привязываются обработчики событий. Вы можете запустить простую проверку, подключив эту строку:
console.log($('.single-option-selector').length);
Мои подозрения подтверждаются, если он возвращает 0, что означает, что во время выполнения ваш скрипт не может найти соответствующий элемент в вашей DOM. Способ преодолеть это - использовать всплывающее окно события: в основном вы присоединяете обработчик события к существующему элементу во время выполнения и просто фильтруете событие, чтобы отлавливать только те, которые испускаются элементами, указанными вашим селектором , т.е.:
$(document).on('change', '.single-option-selector', function () {
// Your logic here
});
Однако у этого подхода есть недостаток: при прослушивании событий в документе верхнего уровня возникают значительные накладные расходы. Если вы знаете, что существует элемент, который всегда доступен во время выполнения, скажем, заданная структура DOM:
<body>
<!-- This element is always present at runtime -->
<section id="content">
<!-- Contains dynamically injected HTML -->
</section>
</body>
Затем вы можете обновить селектор, чтобы прослушивать события, всплывающие до #content, а не далее:
$('#content').on('change', '.single-option-selector', function () {
// Your logic here
});