HTML JQuery .on('change') нужна помощь
Есть код:
$('select').on('change', function () {
if ($(this).hasClass('length')) {
let unit = $(this).val(),
foru = $(this).attr('data-for'),
oval = $(foru).val();
if (unit == 1) {
$(foru).attr('data-value', oval)
} else if (unit == 2) {
nval = parseFloat(oval) / 100;
$(foru).attr('data-value', nval)
} else if (unit == 3) {
nval = parseFloat(oval) / 39.37;
$(foru).attr('data-value', nval)
}
}
});
Вроде все отлично работает с элементами select, но только с теми, которые изначально были на странице. При добавлении новых элементов select, эта функция их не затрагивает. Как решить?
Ответы (2 шт):
Нужно понимать как работает браузер с веб страницей, как он её строит, и как он воспроизводит JS.
Дело в том, что браузер строит DOM, и если встречает JS, то выполняет его, как раз это и происходит в вашем случае. Браузер сформировал элементы <select></select> и теперь JS к ним обращается $('select') и добавляет им слушателя. ВНИМАНИЕ это происходит при загрузке страницы. Манипуляции с DOM такие как добавление новых <select></select> скрипт $('select').on('change'..... не перезапускается, а значит и слушателя у нового элемента не будет.
Однако решение задачи довольно простое.
Заверните весь ваш код $('select').on('change'..... в функцию. Первый раз вызовите её когда страница будет загружена. А последующие разы тогда, когда будут добавляться новые элементы на экран.
ps. чисто совет, сначала почитайте про JS затем переходите к Jquery иначе вопросов будет очень много от того, что нет понимания как работает JS
Используйте метод с "делегированием", например
$(document).on('change', 'select', function () {...
...
}
Вместо document может быть любой элемент, который содержит в себе select, но при этом всегда на странице, и динамически не подгружается как-то еще.
О делегировании можно почитать тут: https://webref.ru/dev/jqfundamentals/events