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

Question

[Максим Маркитантов]

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() {
}

Или так не надо?

Answer 1

[Юрий Есин]

$(document).on('click', '.photo__link', function() {
    var photoId = $(this).data('id');
    callAjaxModal(photoId);
  });

Answer 2

[Александр Аксентьев]

$(document).on

Comments

[Максим Маркитантов]

Забыл сказать все это в функции

$(function() {
}

Или так не надо?

Answer 3

[dummyman]

Через селектор можно обращаться к элементам в структуре DOM. Пока элемент не вставлен в DOM, обращаться к нему можно сохранив ссылку на него в переменной. Для поиска элементов внутри конкретного элемента можно использовать find():
$('.photogallery__column').find('.photo__link')