Почему не отправляется ajax после обновления части страницы ajax'ом?

Question

[Creed1234]

У меня есть вывод товаров. Я могу открывать модальное окно каждого, отправляя ajax. Так же имеется функция фильтрации на ajax , которая может обновить вывод товаров без перезагрузки страницы.

До обновления списка ajax'ом все работает. После обновления - ajax на открытие модального окна не улетает и соответственно модальное окно пустое. Если же модальное окно было открыто до обновления товаров, то открываться будет последнее открытое окно, до обновления.

Подскажите, в чем причина ?
JS модального окна

$('.get-modal-product').on('click', function () {
	let id = $(this).data('id');
	$.ajax({
		url: '/product/show',
		type: 'GET',
		data: {id: id},
		cache: false,
		success:
			function (res) {
				if(!res) alert('Ошибка модального окна');
				showProduct(res);
			},
		error: function () {
			alert('Ошибочка!')
		}
	})
});

function showProduct(product) {
	$('#myModalSingle .modal-body').html(product);
	$('#myModalSingle').modal();
}

JS фильтра товаров (обновление части страницы)

$('#filterButton').on('click', function () {
	let target = document.querySelector('#filterButton')
	if (!target.classList.contains('readyButton')) {
		return alert('Выберите параметры фильтрации')
	} else {
		let brandId = document.querySelector('.brandNamePointer').getAttribute('data-id'),
			categoryId = target.value
		$.ajax({
			url: '/category/filter',
			data: {brandId: brandId, categoryId: categoryId},
			type: 'GET',
			success: function (res) {
				if (!res) alert('Ошибка фильтра')
				$('#myIncludeProductList').html(res);
			},
			error: function () {
				alert('Error!')
			}
		});
		return false;
	}
});

Модальное окно

<div class="modal fade" id="myModalSingle" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-info">
            <div class="modal-header">
                <h4>Быстрый просмотр</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

Вызов модального окна

<a data-id="<?= $product->id ?>" type="button" class="get-modal-product new-gri" data-toggle="modal" data-target="#myModalSingle">

Comments

[Андрей Шевкалюк]

а при чем здесь РНР?

[Creed1234]

Андрей Шевкалюк, подправил.

[Creed1234]

Андрей Шевкалюк, Я новичок в программировании. И поэтому не совсем уверен, что не допустил какой либо ошибки при написании модального окна в PHP.

[Мега Синяк]

Андрей Шевкалюк, потому что в модалке скорее всего внедрение PHP-переменных, а DOM-у на них насрать)

Answer 1

[Rsa97]

Вы заменяете элементы в DOM, а к новым элементам обработчик нажатия не привязан.
Используйте всплытие

$('body').on('click', '.get-modal-product', function () {

Comments

[Creed1234]

Спасибо большое, ответ на поверхности!

[Мега Синяк]

А если body - это модалка, то куда событие повесить?)))

А то автор может не понял, что навешивать нужно на родителя.