jquery не работает на динамически добавленные select

borisovna21 ответов0 / помог1	jquery не работает на динамически добавленные select 1680020656 Хаю хай. Есть у меня следующий селект: `<select name = "worker_1" class="text-center border border-primary" style="width:78%;border-radius: 10px;" required> {% for worker in workers %} <option> {{worker\|short_name}}</option> {% endfor %} </select>` и есть скрипт, который делает выбор уникальным для селектов `$(function () { $('select').on('change',function() { var used = new Set; $('select').each(function () { var reset = false; $('option', this).each(function () { var hide = used.has($(this).text()); if (hide && $(this).is(':selected')) reset = true; $(this).prop('hidden', hide); }); if (reset) $('option:not([hidden]):first', this).prop('selected', true); used.add($('option:selected', this).text()); }); }).trigger('change'); // run at load });` В случае, когда я задаю эти селекты сам, т.е. hml-ем, то на них работет, а когда я динамически добавляю их, то нет. В ходе поисков обнаружил, чтобы скрипт работал, нужно добавить on('event'), как выше, но толку это не дало. Уникальный выбор в селектах получается пока в случае заданного их кол-ва, для динамически добавленных не работает. Что ещё можно глянуть, чтобы сделать рабочий скрипт для динамически добавляемых объектов?
krvsa ответов4 / помог2	1680020797 borisovna21, «Что ещё можно глянуть, чтобы сделать рабочий скрипт для динамически добавляемых объектов?» Как вариант, освоить делегирование событий. https://learn.javascript.ru/event-delegation https://habr.com/ru/post/512782/ borisovna21влепить жирный лайк
borisovna21 ответов0 / помог1	1680020902 krvsa, можно глянуть, спасибо влепить жирный лайк
krvsa ответов4 / помог2	1680021086 borisovna21, «$('select').on('change',function() {/* ... */}» Если проиллюстрировать синтаксис - эту конструкцию можно представить так <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script> $(_ => { $('body').on('change', 'select', function() { console.log(this.value) }) $('button').on('click', _ => { const html = ` <select> <option></option> <option>Item 1</option> <option>Item 2</option> </select> ` $('body').append(html) }) }) </script> </head> <body> <div> <button>Тест</button> </div> </body> </html> влепить жирный лайк