Next Ajax call doesn't work

我正在通过Ajax提交表单：

    <form id="ajax-form-next" method="post" action="">
        <input type="hidden" name="nextPosts" id="nextPosts" value="<?php echo $postIDs; ?>"/>
        <input type="hidden" name="actualPosts" id="actualPosts" value="<?php echo $actualPostIDs; ?>"/>
        <input type="submit" name="next" value="=>"/>
    </form>

在中functions.php:

function theme_name_scripts() {     
    wp_enqueue_script( \'mi-script-ajax\',get_bloginfo(\'stylesheet_directory\') . \'/js/ajax-search.js\', array( \'jquery\' ) );     
    wp_localize_script( \'mi-script-ajax\', \'MyAjax\', array( \'url\' => admin_url( \'admin-ajax.php\' ) ) );
}

add_action( \'wp_enqueue_scripts\', \'theme_name_scripts\' );
add_action(\'wp_ajax_next_posts\', \'next_posts_callback\');
add_action(\'wp_ajax_nopriv_next_posts\', \'next_posts_callback\');

function next_posts_callback() {

    global $post;
    $nextPostIDs = array_map(\'intval\', explode(\',\', $_POST[\'cadenaNext\']));
    $prevPostIDs = preg_match( \'/[0-9,]/\', $_POST[\'cadenaPrev\'] ) ? $_POST[\'cadenaPrev\'] : \'\';
    $actualPostIDs = \'\';
    $counter = 0;
    $postIDs = \'\';
    foreach ( $nextPostIDs as $key => $value ) {
        $mypost = get_post( $value );
        $counter++;
        if( $counter <= 8 ) {
            $actualPostIDs .= $mypost->ID.\',\';
            // Page thumbnail and title.
            ?>
            <article id="post-<?php echo $mypost->ID; ?>" <?php echo $mypost->post_class; ?> style="display: inline-block; width: 20%; margin: 3px; padding: 0px; vertical-align: text-top;">
            <?php
            echo \'<div class="thumbnail-review" style="width: 100%; height: 100%;"><a href="\'.get_permalink( $mypost->ID ).\'">\'.get_the_post_thumbnail( $mypost->ID, \'thumbnail\' ).\'</a></div>\';
            $audioFiles = get_post_meta($mypost->ID, "pistas-de-audio-mp3", array(\'output\' => \'html\'));
            echo \'<div class="mp3-audio-files" style="display: none;">\'.$audioFiles.\'</div>\';
            $audioFiles = get_post_meta($mypost->ID, "pistas-de-audio-ogg", array(\'output\' => \'html\'));
            echo \'<div class="ogg-audio-files" style="display: none;">\'.$audioFiles.\'</div>\';

            add_filter( \'the_title\', \'max_title_length\', 30);
            echo \'<header class="entry-header" style=" padding: 10px 5px 5px 5px ; margin: 2px;"><h1 class="entry-title" style="font-size: 0.7em; margin: 5px;">\';
            echo get_the_title( $mypost->ID );
            echo \'</h1></header><!-- .entry-header -->\';

            //max longitud artistas
            $max = 20; //define your max characters here    
            $terms = get_the_terms( $mypost->ID, \'Artistas\' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
              echo \'<div class="artista" style="font-size: 0.7em; margin-left: 15px; margin-top: 0px; padding: 3px;">\';
              foreach ( $terms as $term ) {
                $term_name = $term->name;
                if( strlen( $term_name ) > $max ) {
                  $term_name = substr( $term_name, 0, $max ). " &hellip;";
                }
                echo \'<a href="\'.get_term_link( $term->slug, \'Artistas\' ).\'" title="\'.$term->name.\'">\'.$term_name.\'</a>\';
              }
              echo \'</div>\';
            endif;
            echo \'</article>\';
            remove_filter( \'restrict_manage_posts\', \'max_taxonomy_length\');
            remove_filter( \'the_title\', \'max_title_length\');

        } else {
            $postIDs .= $mypost->ID.\',\';
        }
    }

        echo \'</div>\';

        //botones de siguientes y anteriores reviews
        $actualPostIDs = substr( $actualPostIDs, 0, strlen( $actualPostIDs ) - 1 );

        if( $postIDs ) {
            $postIDs = substr( $postIDs, 0, strlen( $postIDs ) - 1 );
        }
        if( $prevPostIDs ) {
            $prevPostIDs = substr( $prevPostIDs, 0, strlen( $prevPostIDs ) - 1 );
        }
        if( $postIDs || $prevPostIDs ) {

            if( $postIDs ) {
                echo \'<form id="ajax-form-next" method="post" action="">\';
                echo \'<input type="hidden" name="actualPosts" id="actualPosts" value="\' . $actualPostIDs . \'"/>\';
                echo \'<input type="hidden" name="nextPosts" id="nextPosts" value="\' . $postIDs .\'"/>\';
                echo \'<input type="submit" name="next" value="=>"/>\';
                echo \'</form>\';
            }
            if( $prevPostIDs )  {
                echo \'<form id="ajax-form-prev" method="post" action="">\';
                echo \'<input type="hidden" name="actualPosts" id="actualPosts" value="\' . $actualPostIDs . \'"/>\';
                echo \'<input type="hidden" name="prevPosts" id="prevPosts" value="\' . $prevPostIDs .\'"/>\';
                echo \'<input type="submit" name="prev" value="<="/>\';
                echo \'</form>\';
            }

        }

        die(); 
}

这只是第一次起作用。第二次提交表单时，它没有发送Ajax请求。原始页面已加载。知道发生了什么吗？（我知道我必须使用nonces，但首先我想让它起作用）

这是ajax-search.js 文件：

jQuery(document).ready(function($) {
    var cadenaNext=\'\';
    var cadenaPrev=\'\';
    $(\'#ajax-form-next\').submit(function(e){
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : \'next_posts\' ,cadenaNext : $(\'#nextPosts\').val(), cadenaPrev : $(\'#actualPosts\').val() }, function(response) {
                $(\'#posts_container\').hide(1000);
                setTimeout(function() {$(\'#posts_container\').html(response).show(1000);}, 1000);
            });
    });

    $(\'#ajax-form-prev\').submit(function(e){
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : \'next_posts\' ,cadenaNext : $(\'#prevPosts\').val(), cadenaPrev : $(\'#actualPosts\').val() }, function(response) {
                $(\'#posts_container\').hide(1000);
                setTimeout(function() {$(\'#posts_container\').html(response).show(1000);}, 1000);
            });
    });

});

小码农CODE

相关推荐

如何找出导致(中断)AJAX登录的原因