过滤类别后无法打开Ajax模态

问：

我有一个模态，当点击帖子时会弹出以显示其中的内容。在首页上一切正常，但在右侧，我得到了包含所有列出的类别的侧边栏，该侧边栏也与ajax调用一起使用，以根据点击的类别过滤掉帖子。

现在，每当访问者单击侧边栏上的类别时，首页上的内容就会更新为与该类别关联的新帖子，这是可以的。但是，如果我尝试点击帖子，那么在首页上显示内容的模式是否不起作用？这里可能有什么问题？

我用来触发ajax的按钮

 <a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>

模态-ajax.js

jQuery(document).ready(function($) {

    $('.view-post').click(function(e) {
        e.preventDefault();

        var postID = $(this).data('postid');
        var postSlug = $(this).data('slug');

        // changing URL based on the post slug
        window.history.pushState(null, null, postSlug);

        $.ajax({
            url: wpAjax.ajaxUrl, // WordPress AJAX endpoint
            type: 'post',
            data: {
                action: 'get_post_content',
                post_id: postID,
            },
            success: function(response) {
                $('#modal-content-placeholder').html(response);
                $('#modal').show();
            }
        });
    });

    $('.homeInner').click(function() {
        $('#modal').hide();
    });

    $(window).click(function(event) {
        if (event.target == $('#modal')[0]) {
            $('#modal').hide();
        }
    });

});

模态回调.php

<?php 

function get_post_content() {
    $post_id = $_POST['post_id'];
    $post_slug = $_POST['post_slug'];

    $args = array(
        'p' => $post_id,
        'post_type' => 'post',
    );

    $singlePostQuery = new WP_Query($args);

    if ($singlePostQuery->have_posts()) {
        while ($singlePostQuery->have_posts()) {
            $singlePostQuery->the_post();
            // Display the post content here
            the_content();
        }
    } else {
        // No posts found
        echo 'No posts found';
    }


    wp_die();

}
add_action('wp_ajax_get_post_content', 'get_post_content');
add_action('wp_ajax_nopriv_get_post_content', 'get_post_content');

用于在侧边栏中过滤的 Ajax 文件和回调函数我正在使用
filter-ajax.js

(function($){

    $(document).ready(function(){
        $(document).on('click', '.js-filter-item', function(event){
            (event).preventDefault();

            var category = $(this).data('category');
            var categorySlug = $(this).data('slug');

            // changing URL based on the category slug
            window.history.pushState(null, null, categorySlug);

            $.ajax({
                url: wpAjax.ajaxUrl,
                data: { 
                    action: 'filterterm', 
                    category: category, 
                    taxonomy:  $(this).data('taxonomy'),
                    posttype:  $(this).data('posttype')
                    },
                type: 'post',
                success: function(result){
                    $('#response').html(result);
                },
                error: function(result){
                    console.warn(result);
                }
            });
        });
    });
})(jQuery);

ajax-callback.php

<?php
add_action('wp_ajax_nopriv_filterterm', 'filter_ajax_term');
add_action('wp_ajax_filterterm', 'filter_ajax_term');

function filter_ajax_term(){

    $category = $_POST['category'];

    $args = array(
        'post_type' => $_POST['post'], 
        'posts_per_page' => -1, 
        'orderby'   => 'NAME', 
        'order' => 'ASC'
    );

    if ($category !== null && isset($category) && $category !== '' && !empty($category)) {
        $args['tax_query'] = 
            array( 
                array( 
                        'taxonomy' => $_POST['taxonomy'], 
                        'field' => 'id', 
                        'terms' => array((int)$category) 
                    ) 
            ); 
    } else {
        $all_terms = get_terms(array('taxonomy' => 'acquisition', 'fields' => 'slugs'));
        $args['tax_query'][] = [
            'taxonomy' => 'acquisition',
            'field'    => 'slug',
            'terms'    => $all_terms
        ];
    }


    $the_query = new WP_Query( $args ); ?>
    
    <div class="blogPostsWrapper mt-10">
        <div class="grid grid-cols-3 gap-4 mr-5">

            <?php if ( $the_query->have_posts() ) : 
                while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                <?php get_template_part( 'partials/blog', 'card' ); ?>
        
            <?php endwhile; endif; ?>
        </div>
    </div>
<?php

    die();
}

?>

博客卡.php

<div class="blogCardBlackOverlay">
    <div class="col-span-1 shadow-2xl">
    <?php $thumb = get_the_post_thumbnail_url(); ?>
        <div class="relative blogPostCard rounded-2xl" style="background-image: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.3) 130%), url('<?php echo $thumb;?>')">
            <h1 class="blogPostCard_title font-sans text-white font-bold text-start"><?php the_title(); ?></h1>
            <!-- Gettng custom taxonomies associate with teh post -->
            <?php
                $post_id = get_the_ID();
                $terms = get_the_terms($post_id, 'acquisition');

                if ($terms && !is_wp_error($terms)) {
                    $first_term = reset($terms); ?>
                    <span class="blogCard_taxonomy__item py-1 px-4 text-sm rounded-2xl absolute bottom-4 right-4 font-medium item-<?php echo $first_term->slug; ?>"><?php echo $first_term->name; ?></span>
                <?php
                }
            ?>
            <!-- Reading time -->
            <div class="blogPost_readingTime__wrapper">
                <?php 
                $readingTime = get_field('reading_time');
                ?>
                <div class="blogPost_readingTime text-white text-avenir absolute bottom-4 left-4">
                    <i class="fa-regular fa-lightbulb"></i>
                    <span><?php echo $readingTime; ?></span>
                </div>
            </div>
                <a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>
        </div>
    </div>
</div>