Как повесить обработчик на динамический элемент?

Question

[danilx556]

Пользователь заходит на платформу с онлайн уроком, в определенный момент у него появляется кнопка.

В эту кнопку нужно подтянуть значение location.search, с этим я справился. Но при заходе на страницу у пользователя нет этого элемента с кнопкой. Он появится в неизвестное время.

Я читал, что можно как-то делегировать обработчик на родителя, но не нашел как это сделать.

DOM до появления кнопки:


DOM после появления кнопки:


В виде кода:

<div id="files" class="files panelitem mainbg" style="display:none;"></div>

Подскажите, как повесить обработчик на элемент, который неизвестно когда появится. Чтобы когда он появился, определенная функция поменяла в кнопке href

Comments

[danilx556]

Дополню, что прямого доступа к коду не имею. Могу только добавить сторонний html код.

Answer 1

[Aetae]

Причём тут обработчик события, если тебе надо поменять href сразу, а не при каком-то событии?

Правильный ответ: найти функцию, которая эту кнопку добавляет и добавить в неё изменение href.
Плохой ответ: MutationObserver.

Comments

[danilx556]

Сразу это когда? При заходе на страницу у пользователя в document нет этого элемента. Он появится после определенного времени, на скринах это видно. Как поменять href сразу, если элемента еще нет?

[Aetae]

danilx556, у тебя каша в голове. Обработчик события это то что вешается на событие пользовательского ввода(или иное), например onClick. Твой вопрос к этому отношения не имеет.
Сразу - это сразу как появился.

[danilx556]

Aetae, сори, я не профи). Я пробовал поставить скрипт, который при загрузке страницы сразу изменяет href, но на момент загрузки страницы, этого элемента не существует.

Объясни, где туплю

[Aetae]

danilx556, в ответе написано, что можно сделать.

[Команданте Фидель]

У вас нет доступа к скриптам сайта? Если так, то да, Mutation observer. Для упрощения задачи можете использовать arrive.js.

[danilx556]

Команданте Фидель, доступ есть, могу установить любой скрипт

[Команданте Фидель]

danilx556, Тогда ищите тот скрипт, который эту кнопку подгружает, и сразу после её добавления в DOM и меняйте href. Она же не по щучьему велению появляется, а конкретным скриптом добавляется. Это наиболее грамотное решение.

Может быть так, что этот скрипт подгружается с внешнего сайта и вы не можете его изменить. Тогда arrive.js или свой костыль через MutationObserver.

Answer 2

[Надим]

Вы должны тупо провесить обработчик на body.

Comments

[danilx556]

какой обработчик?

[Надим]

danilx556, если вам надо просто дождаться появления какого-то элемента и выполнить код, попробуйте так:

Развернуть код

function waitElements(selector, regexp, where) {
	
	return new Promise(function(returnResult) {
		
		var search_result = false;
		
		var local_reactive_function = function() {
			
			var wait_elements = searchElements(selector, regexp, where);
			
			if (wait_elements.length > 0) {
				
				if (search_result === false) {
					
					search_result = true;
					observer.disconnect(); 
					
					returnResult(wait_elements);
					
				}
				
			}
			
		}
		
		var observer = new MutationObserver(local_reactive_function);
		
		observer.observe(document.body, {
			characterData: true,
			attributes: true,
			childList: true,
			subtree: true
		});
		
		local_reactive_function();
		
	});
	
}

function searchElements(selector, regexp, where) {

	var search_elements = [];
	
	if (typeof where !== 'undefined') {
		
		var all_elements = where.querySelectorAll(selector);
		
	}
	
	else {
		
		var all_elements = document.querySelectorAll(selector);
		
	}
	
	for (var n = 0; n < all_elements.length; n++) {
		
		if (typeof regexp == 'object') {
			
			if (typeof regexp.test == 'function') {
				
				if (regexp.test(all_elements[n].innerText.trim())) {
					
					search_elements.push(all_elements[n]);
					
				}
				
			}
			
			
		}
		
		else {
			
			search_elements.push(all_elements[n]);
			
		}
	}
	
	return search_elements;

}

Функция waitElements возвращает промис, который завершается при появлении указанных элементов.

Например, чтобы дождаться появления на странице элемента с классом .class достаточно выполнить в консоли:

elements = await waitElements('.class');

console.log('Элементы успешно найдены:');
console.dir(elements);

Answer 3

[writer_2159]

Делегирование событий.
событие весишь на родителя и проверяешь что клик был по нужному элементу

https://learn.javascript.ru/event-delegation