Почему jQuery не находит элемент?

Question

[Дмитрий Дев]

На странице select формируется библиотекой select.js. Необходимо получить значение выбранного через select и передать его в стандартное поле Битрикс. Я пытаюсь отловить изменение .select. Для этого после этой библиотеки я подключаю multiSelectListener.js
Скриншот фрагмента кода удалён модератором.
в которой я пытаюсь найти элемент элемент с классом .select

BX.ready(function () {
	select = document.querySelector('.select');
	console.log(select);	
});
$(document).ready(function () {
	console.log($('.select__dropdown'));
});

но ничего не находит. Почему и как его найти, чтобы повесить на него событие?

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[FKV]

Потому что вы пытаетесь найти элемент в момент когда он еще не создан.

Comments

[Дмитрий Дев]

FKV Я понимаю, что на момент срабатывания скрипта элементов еще нет, но я не могу понять почему, если скрипт подключен после библиотеки и добавлено BX.ready аналогичный $(document).ready?

[FKV]

Потому что BX.ready и $(document).ready подписки на события, когда DOM основного документа загружен и готов к работе, то есть то что изначально было в верстке.
Объясните подробнее всю задачу.

[Дмитрий Дев]

FKV поправил вопрос.

[FKV]

В вашем случае можно воспользоваться делигированием событий.
Но я зашел на сайт и убедился в том что select.js и так выбирает нужный option у оригинального select, просто у оригинального select значения value прописаны не те(скорее всего id параметра из бд)
Проверить можно кодом

Array.from(document.querySelectorAll('select')).forEach((el) => {
    el.addEventListener('change', (e) => {
        console.log(e.target.value)
    })
})

и потом пощелкать списки и посмотреть что при выборе select меняется значения оригиналного.

[Дмитрий Дев]

FKV, да, так срабатывает. Только не понял, как Вы поняли, что нужно зацепиться за оригинальный select, а не за тот что сформировался под классом .select?

[FKV]

Дмитрий Климантович, Если вы про код выше. То он показывает то что при изменении .select, меняется и значение оригинального. Соответвенно вы можете подписаться на событие изменения оригинального и брать из него значение. Может я чего то не понял конечно. Вот вообщем код который получет значения при выборе. Можете далее использовать по назначению.

Array.from(document.querySelectorAll(".js-lib-select")).forEach((el) => {
  el.addEventListener("change", (e) => {
    console.log(el.options[el.selectedIndex].text);
  });
});

Answer 2

[Elvis]

Попробуйте указать defer

Comments

[Дмитрий Дев]

Elvis к сожалению, не могу - это будет неправильно для cms 1С-Битрикс. Если я буду добавлять скрипты не через функцию битрикса, то они кэшировать и сжиматься не будут.

[キム ファイブプラス]

В тегах значит укажи что это бетрекз. У вас там своя атмосфера во всем.