@Denisido

Всплытие событий при клике после подзагрузки данных на страницу (ещё) FETCH API?

Здравствуйте!
Помогите понять логику подгрузки динамических данных на страницу (без ее перезагрузки) с помощью ассинхронных функций (fetch API желательно с jquery),
чтобы не было эффекта всплытия событий при клике на созданную запись?
К примеру, на странице 10 записей
нажимаю кнопку "подгрузить еще" в конце страницы (или скролом) и происходит подгрузка еще 10 записей (всего уже 20). Тут понятно. Но вопрос в том, как вешать обработчики на динамически подгруженные данные при рекурсии функции?
ПРИМЕР: https://codepen.io/denisido/pen/NZXvdq?editors=0011
Есть вариант с e.stopImmediatePropagation(); но корректное ли это решение?
  • Вопрос задан
  • 187 просмотров
Решения вопроса 1
@Cr2ed
$('a').on('click', async function(e) {
		e.preventDefault();
    	$('h2').hide();
		let mrd = await showInfo();

    const content = mrd.map(function(res, elem) {	
			return `
					<div class="box">${res.website}, элемент ${elem}</div>
			`
			}).join('');

    const el = $(content);
    $('body').find('h2').after(el);
    el.on('click', function() {console.log($( this ).text())});
		
	});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Denisido Автор вопроса
Cr2ed , благодарю Вас за ответ, он мне помог!
Возник вопрос.
Есть ли принципиальная разница между вашим подходом и примером ниже:
https://codepen.io/denisido/pen/NZYypr ,
в котором используются методы .off('click') или e.stopImmediatePropagation() для предотвращения всплытия событий? Что происходит в стеке?
Извините дилетанта, мне все интересно, а иногда бывает такое, что информацию в интернете по конкретным вопросам найти сложно, приходится беспокоить опытных профи своими глупыми вопросами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы