过滤类别后 Ajax 模式未打开

Question

我有一个模式，当单击帖子时会弹出以显示其中的内容。这一切在首页上都运行良好，但在右侧我也得到了侧边栏，其中包含所有列出的类别，这些类别也与 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>

modal-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();
        }
    });

});

modal-callback.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');

Answer 1

问题似乎是（根据我们对这个问题的讨论）

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();
        }
    });

});

脚本被添加到首页，但没有添加到其他页面。您需要确保正确添加单击锚点时触发事件的脚本。