Wordpress ajax函数在不调用时在前端运行

Question

我有一个页面显示自定义帖子类型的存档，并且有一个实时搜索字段。页面应加载一组默认结果，然后在搜索字段中键入按键时将根据帖子标题过滤出结果，如果清除该字段，则仅显示所有内容，就像页面最初加载时一样。

这一切都按预期工作，但是当页面加载时，大约 4-5 秒后它会再次加载结果，而不与页面进行任何交互。

此外，如果单击帖子并且它是外部链接，则会重新加载结果。如果帖子链接到内部页面，则不会发生这种情况。

我还尝试使用搜索字段，然后单击结果，它保留搜索结果，但再次重新加载它们。

我只在一处调用该函数，即使用

onkeyup="fetch()"

在输入字段上调用该函数，所以我不知道为什么它会单独运行。它只执行一次，我也不确定 4-5 秒的延迟是从哪里来的。

这是我在functions.php 文件中的内容：

add_action('wp_ajax_data_fetch', 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch');
function data_fetch(){

    remove_all_filters('posts_orderby');
    
    $the_query = new WP_Query( 
        array( 
            'post_type' => 'games',
            'post_title_like' => esc_attr( $_POST['keyword'] ),
            'orderby' => 'post_title',
            'post_status' => 'publish',
            'order' => 'ASC'
        )
    );

    $the_query_empty = new WP_Query( 
        array(
            'posts_per_page' => -1,
            'post_type' => 'games',
            'order' => 'ASC',
            'post_status' => 'publish',
            'orderby' => 'menu_order'
        )
    );

    // if the user has typed, filter posts
    if( $_POST['keyword'] != '' && $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();

            $website = get_field('website');
            if($website){
                $url = $website;
            }else{
                $url = get_the_permalink();
            }
            ?>
            <a href="<?php echo $url; ?>" title="<?php the_title(); ?>" class="fadein"<?php if($website){echo ' target="_blank"';} ?>><?php the_post_thumbnail(); ?></a>

        <?php endwhile;
        wp_reset_postdata();
    endif;


    // if search terms have been deleted, show all
    if( $_POST['keyword'] == '' && $the_query_empty->have_posts() ) :
        while( $the_query_empty->have_posts() ): $the_query_empty->the_post();

            $website = get_field('website');
            if($website){
                $url = $website;
            }else{
                $url = get_the_permalink();
            }
            ?>
            <a href="<?php echo $url; ?>" title="<?php the_title(); ?>" class="fadein"<?php if($website){echo ' target="_blank"';} ?>><?php the_post_thumbnail(); ?></a>

        <?php endwhile;
        wp_reset_postdata();
    endif;

    die();
}

存档文件：

<input type="text" name="keyword" id="keyword" class="game-search-field" onkeyup="fetch()" value="" placeholder="Search..." />

<script>
    function fetch(){
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
            success: function(data) {
                jQuery('.game-list').html( data );
            }
        });
    }
</script>

之后，它只是一个包裹在

.game-list

div 中的标准帖子循环。有人可以深入了解发生了什么事吗？无意自我推销，但这是网址，以便您可以看到它的实际效果：https://maximument.com/games/

Answer 1

问题在于您的

fetch

函数的名称以及代码的编写方式。您的

fetch

函数正在全局定义，因此使用本机 Fetch API 的任何其他代码都将使用您的函数，该函数在您的网站上被 Google 跟踪代码管理器多次调用。

有多种方法可以解决此问题，其中之一是更改函数的名称：

<input 
    type="text" 
    name="keyword" 
    id="keyword" 
    class="game-search-field" 
    onkeyup="max_entertainment_game_fetch()" 
    value="" 
    placeholder="Search..." 
/>

<script>
    function max_entertainment_game_fetch() {
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { 
                action: 'data_fetch', 
                keyword: jQuery('#keyword').val() 
            },
            success: function(data) {
                jQuery('.game-list').html( data );
            }
        });
    }
</script>