Работает только клик по первому элементу
Здравствуйте, проблема такая: есть сайт на bootstrap, я вывожу список материалов, у каждого материала есть кнопка "поделиться", при клике на нее должно сверху браузера выходить уведомление, что ссылка скопирована. Я сделал эти уведомления на Bootstrap Alerts, вот как это работает, все просто:
На сайте, сверху есть блок для показа уведомлений (пустой пока) <div id="liveAlertPlaceholder" class="alert-message"></div> В каждом материале (их 10шт на странице) есть кнопка с id liveAlertBtn (я понимаю что нельзя один id 10 раз, но пока так: <a href="##" class="share" id="liveAlertBtn">Поделиться</a> В js из документации бутстрапа: var alertPlaceholder = document.getElementById('liveAlertPlaceholder') var alertTrigger = document.getElementById('liveAlertBtn') function alert(message, type) { var wrapper = document.createElement('div') wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' alertPlaceholder.append(wrapper) } if (alertTrigger) { alertTrigger.addEventListener('click', function () { alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success') // Скрываем алерт через 4 секунды window.setTimeout(function () { $(".alert-success").alert('close'); }, 4000); }) } Нужно думаю как-то изменить js, (возможно 2 и 12 строки js) чтобы работало не с id getElementById, а с классом share например (он там есть). Туплю не получается исправить. :help: :help: По итогу, клик по первому элементу показывает уведомления, клик по остальным 9 элементам на странице ничего не показывает и ошибку не выводит. |
Цитата:
По классу можно найти элемент используя querySelector. Но он тоже найдет только первый. Не видя всей разметки, как там у вас организованы блоки ваших материалов, подсказать трудно. |
Leon2110,
var alertPlaceholder = document.getElementById('liveAlertPlaceholder') function alert(message, type) { var wrapper = document.createElement('div') wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' alertPlaceholder.append(wrapper) } document.addEventListener('click', function(event) { if (!event.target.closest('[id=liveAlertBtn]')) return; alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success') // Скрываем алерт через 4 секунды window.setTimeout(function() { $(".alert-success").alert('close'); }, 4000); }) |
рони, Спасибо, это работает как нужно :dance:
|
Часовой пояс GMT +3, время: 13:32. |