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

Question

[Денис]

Здравствуйте!
Помогите понять логику подгрузки динамических данных на страницу (без ее перезагрузки) с помощью ассинхронных функций (fetch API желательно с jquery),
чтобы не было эффекта всплытия событий при клике на созданную запись?
К примеру, на странице 10 записей
нажимаю кнопку "подгрузить еще" в конце страницы (или скролом) и происходит подгрузка еще 10 записей (всего уже 20). Тут понятно. Но вопрос в том, как вешать обработчики на динамически подгруженные данные при рекурсии функции?
ПРИМЕР: https://codepen.io/denisido/pen/NZXvdq?editors=0011
Есть вариант с e.stopImmediatePropagation(); но корректное ли это решение?

Answer 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())});
		
	});

Answer 2

[Денис]

Cr2ed , благодарю Вас за ответ, он мне помог!
Возник вопрос.
Есть ли принципиальная разница между вашим подходом и примером ниже:
https://codepen.io/denisido/pen/NZYypr ,
в котором используются методы .off('click') или e.stopImmediatePropagation() для предотвращения всплытия событий? Что происходит в стеке?
Извините дилетанта, мне все интересно, а иногда бывает такое, что информацию в интернете по конкретным вопросам найти сложно, приходится беспокоить опытных профи своими глупыми вопросами.

Comments

[Cr2ed]

Тут хорошо описано отличие preventDefault, stopPropagation и stopImmediatePropagation.

Ну а так... лучше тут использовать не ссылку а кнопку. Каждый тег должен соответствовать своему назначению. Не имеет смысла вставлять сслыку, что бы потом отключать ее основной функционал и добавлять функционал клика, когда для этого имеются кнопки

[Денис]

Подскажите, пожалуйста после добавления динамических блоков как можно сразу в экземпляре сделать выборку на выбор класса "а" при клике блока с этим классом не прибегая к условию if в теле ф-ции?

...
const content = mrd.map(
...
<div class="a">${res.id}</div>
<div class="b">${res.}</div>
<div class="c">${res.name}</div>
...
const el = $(content);
$('body').find('div:last').after(el);
el.on('click', function() { // как сразу в экземпляре сделать выборку на класс "а" не прибегая к if ниже
	if ($(this).hasClass('a')) {
		console.log(`Это класс А!`);
	} 
});

Так не работает:

el.find('.a').on('click'....); // error
$(el['class="a"']).on('click'...); // error

[Cr2ed]

Денис, не очень понял чего вы хотите добиться.

[Денис]

Нет, я хочу чтобы клики были не по всем блокам, а только по тому, у которого есть класс "а"

[Cr2ed]

попробуйте el.children('.a').on('click'....).

[Денис]

Cr2ed, к сожалению, так тоже не помогло. По сути, должен быть массив только блоков.
2-а рабочих кода:

el.on('click', function() {
	if ($(this).hasClass('a')) {
		console.log(`Это класс А!`);
	} 
});

el.each(function() {
	if ( $(this).hasClass('a')) {
		console.log($(this).text());
	}
});

Но, интересно, почему не делает выборку сразу по классу?

[Денис]

Отдохнул. Посидел подумал и написал следущее:
codepen