@nataly_by

JQuery + ajax, загадка с «alert». Как можно без alert сделать, чтобы работало?

Не могу решить такую задачку.
вот пример
при нажатии на кнопки цветов в линейке под заголовком, подгружаются посты, у которых есть параметр выбранного цвета. Нужно именно AJAX, потому что выборка будет проходить сразу на нескольких страницах выбранной категории товара (на одной хватило бы и jQuery, конечно).
Все работает, только после выгрузки новых данных перестали работать кнопки выбора цвета, которые всплывают при наведении на товар. Под товаром тоже кнопки, при нажатии на них подгружалась нужного цвета фото. После загрузки данных через AJAX, эти кнопки перестали срабатывать.
Но ..... Когда добавить alert('1') в код, все начинает работать так, как и должно быть.
Помогите разобраться, почему так происходит.
Как сделать так, чтобы работало без alert('1')? В чем подвох?
вот пример без alert('1'). Не срабатывают кнопки выбора цвета под конкретным товаром.
POTENZA.filter = function () {
	if ($('.filter').exists()) {
		$('.filter').click(function()  {
			$(this).toggleClass('active');
			$(this).siblings().removeClass('active');
			var ajaxurl = 'http://m-promo.by/wp-admin/admin-ajax.php';
			var colorName = $(this).attr('data-color');
			var categoryName = $(this).attr('data-category');
			$.ajax({
				type: 'POST',
				url: ajaxurl,
				data: {"action": "load-filter2", category: categoryName, color: colorName },
				success: function(response) {
					$('#category-post-content').html(response);
					return false;
				}
			});
			POTENZA.swatchesOnGrid();
		})
	}
}


А вот в таком случае работают кнопки выбора цвета под конкретным товаром
POTENZA.filter = function () {
	if ($('.filter').exists()) {
		$('.filter').click(function()  {
			$(this).toggleClass('active');
			$(this).siblings().removeClass('active');
			var ajaxurl = 'http://m-promo.by/wp-admin/admin-ajax.php';
			var colorName = $(this).attr('data-color');
			var categoryName = $(this).attr('data-category');
			$.ajax({
				type: 'POST',
				url: ajaxurl,
				data: {"action": "load-filter2", category: categoryName, color: colorName },
				success: function(response) {
					$('#category-post-content').html(response);
					return false;
				}
			});
			alert('1');
			POTENZA.swatchesOnGrid();
		})
	}
}

добавилась строка alert('1');
POTENZA.swatchesOnGrid(); - это функция jQuery, которая и обеспечивает подгрузку картинки нужного цвета при нажатии на кнопке выбора цвета под товаром.
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 2
solidcreature
@solidcreature
Разработчик сайтов на WordPress
Здравствуйте, Наталья, посмотрите на похожий вопрос Почему не работает javascript после ajax получения ответа?,
мне кажется суть проблемы раскрыта в первом ответе.
Ответ написан
sgkrim37
@sgkrim37
фронт
Решение простое, у вас при подгругрузке jQuery все нормально, но после ajax запроса ваш DOM обновляется и кнопка загружается уже создана после инициализации. Вызывайте событие клика от body и все будет ок.

$('body').on('click', '.filter', function( тело функции ) );
Ответ написан
Ваш ответ на вопрос

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

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