markitantovm
@markitantovm
Художник, музыкант, литературовед

Как добавить событие click на новый DOM имеющий тот же класс, что и старые (несгенерированные DOM)?

Html код который есть
<div class="photogallery__grid">
							<div class="row photogallery__row">
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="1" ><img src="photos/1.jpg" alt="1"></a></div>
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="2" ><img src="photos/2.jpg" alt="2"></a></div>
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="3" ><img src="photos/3.jpg" alt="3"></a></div>
							</div>
							<div class="row photogallery__row">
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="4" ><img src="photos/4.jpg" alt="4"></a></div>
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="5" ><img src="photos/5.jpg" alt="5"></a></div>
								<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="6" ><img src="photos/6.jpg" alt="6"></a></div>
							</div>
</div>
<a id="more" class="button button_more">Ещё</a>

При нажатии на кнопку #more добавляются DOM:
<div class="col-md-4 col-sm-4 col-xs-4 photogallery__column"><a href="#photo-modal" class="photo__link" data-toggle="modal" data-id="1" ><img src="photos/1.jpg" alt="1"></a></div>

Вариант ниже работает только на элементах, записанных в html
$('.photo__link').on('click', function() {
		var photoId = $(this).data('id');
		callAjaxModal(photoId);
	});


Такой вариант вообще не работает не к старым, не к новым элементам DOM
$('.photo__link').on('click', '.photo__link', function() {
		var photoId = $(this).data('id');
		callAjaxModal(photoId);
	});


Однотипных элементов много, все они различаются только data-id. Возможно ли сделать такое с селектором по классу? Если да, то как? И если нет, то как?
P.S.
Все это в функции
$(function() {
}

Или так не надо?
  • Вопрос задан
  • 113 просмотров
Решения вопроса 2
Exomode
@Exomode
Архитектор ПО
$(document).on('click', '.photo__link', function() {
    var photoId = $(this).data('id');
    callAjaxModal(photoId);
  });
Ответ написан
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Пригласить эксперта
Ответы на вопрос 1
dummyman
@dummyman
диссидент-схизматик
Через селектор можно обращаться к элементам в структуре DOM. Пока элемент не вставлен в DOM, обращаться к нему можно сохранив ссылку на него в переменной. Для поиска элементов внутри конкретного элемента можно использовать find():
$('.photogallery__column').find('.photo__link')
Ответ написан
Ваш ответ на вопрос

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

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