Наличие Динамически Добавленного Элемента
Рассмотрим, как проверить наличие динамически добавленного элемента в DOM-дерево с помощью JavaScript.
Чтобы проверить наличие динамически добавленного элемента в DOM, воспользуйтесь следующим кодом.
<button type="button" class="btn">Проверить наличие элемента</button>С помощью jQuery:
jQuery(($) => {
$(".btn").on("click", () => {
if (!$(".new-element").length == 0) {
alert("Есть элемент!");
} else {
alert("Нет элемента!");
}
});
});Пример.
В данном примере, мы проверяем наличие элемента .new-element после нажатия на кнопку, т.е. после события click. Но событие может быть и другим, submit, hover и т.п.
На нативном JavaScript это будет выглядеть следующим образом.
document.addEventListener("DOMContentLoaded", () => {
const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
if (document.querySelector(".new-element")) {
alert("Есть элемент!");
} else {
alert("Нет элемента!");
}
});
});Если вдруг у вас не сработает проверка, можете попробовать добавить setTimeout().
jQuery(($) => {
$(".btn").on("click", () => {
setTimeout(() => {
// Ваш код
}, 100);
});
});
// или
document.addEventListener("DOMContentLoaded", () => {
const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
setTimeout(() => {
// Ваш код
}, 100);
});
});Возможно, вам также будет интересна статья о том, как определить клик вне элемента.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: