Как решить проблему с кнопкой показать еще на ajax Wordpress?

Question

[anmkh]

Все работает, но если перейти по вкладкам, в нашем случае (ajax-label) и в них нажать кнопку показать еще (#loadmore-works button) показываются нужные записи, но как только я перейду на следующую вкладку и нажму там показать еще - мне прилетает предыдущий term, хотя атрибут на кнопке я меняю:

const container = $("#works-response");
	let paged = 1;
	let maxPages = 1;
	$(".ajax-label").click(function (e) {
		e.preventDefault();

		let term = $(this).data("term");
		if ($(this).hasClass("ajax-label")) {
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
		}

		console.log("PAGED до запроса", paged);
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				// paged: 0,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.html("");
						container.append(post.html);
					});
					paged = 1;
					console.log("PAGED ПОСЛЕ запроса", paged);
					maxPages = response.max_pages;
					$("#loadmore-works button").attr("data-term", term);
					$("#loadmore-works button").removeAttr("data-max_pages");
					$("#loadmore-works button").removeAttr("data-paged");
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});
	$("#loadmore-works button").click(function (e) {
		e.preventDefault();
		let term = $(this).data("term");
		paged = 1;
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				paged: paged,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.append(post.html);
					});
					maxPages = response.max_pages;
					paged++;
					console.log("PAGED после запроса показать еще", paged);
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});

$paged = !empty($_POST['paged']) ? $_POST['paged'] + 1 : 1;
    $term = !empty($_POST['term']) ? intval($_POST['term']) : false;

    $post_type = "nashi-raboty";
    $taxonomy = "portfolio_category";

    $args = array(
        'post_status' => 'publish',
        'post_type' => $post_type,
        'paged' => $paged,
        'tax_query' => array(
            array(
                'taxonomy' => $taxonomy,
                'field'    => 'term_id',
                'terms'    => $term,
            )
        ),
        'posts_per_page' => 2
    );

Answer 1

[anmkh]

Решил проблему:

Нужно добавить атрибут для кнопки до AJAX запроса. Обновленный код:

const container = $("#works-response");
	let paged = 1;
	let maxPages = 1;
	$(".ajax-label").click(function (e) {
		e.preventDefault();

		let term = $(this).data("term");
		if ($(this).hasClass("ajax-label")) {
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
		}
		$("#loadmore-works button").data("term", term);
		console.log("PAGED до запроса", paged);
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				// paged: 0,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.html("");
						container.append(post.html);
					});
					paged = 1;
					console.log("PAGED ПОСЛЕ запроса", paged);
					maxPages = response.max_pages;
					$("#loadmore-works button").attr("data-term", term);
					$("#loadmore-works button").removeAttr("data-max_pages");
					$("#loadmore-works button").removeAttr("data-paged");
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});
	$(document).on("click", "#loadmore-works button", function (e) {
		e.preventDefault();
		let term = $(this).data("term");
		paged = 1;
		$.ajax({
			url: perviy_ajax_obj.ajaxurl,
			type: "POST",
			data: {
				action: "get_works",
				term: term,
				paged: paged,
			},
			success: function (response) {
				if (response.message) {
					console.log(response.message);
				} else {
					console.log(response);
					response.posts.forEach(function (post) {
						console.log(post);
						container.append(post.html);
					});
					maxPages = response.max_pages;
					paged++;
					console.log("PAGED после запроса показать еще", paged);
					if (paged == maxPages) {
						$("#loadmore-works button").addClass("none");
					} else {
						$("#loadmore-works button").removeClass("none");
					}
					$(".works__images").twentytwenty();
				}
			},
		});
	});