@Creed1234

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

У меня есть вывод товаров. Я могу открывать модальное окно каждого, отправляя 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">
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Вы заменяете элементы в DOM, а к новым элементам обработчик нажатия не привязан.
Используйте всплытие
$('body').on('click', '.get-modal-product', function () {
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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