一個事件在另一個事件完成之后發生嗎？

Question

我正在嘗試創建一系列事件，如下所述：

1）用戶單擊.post-link ，如果該頁面尚不存在，則會將頁面滾動到頂部。

2） #project-container將打開，顯示#loading-animation 。

3）該帖子將通過Ajax加載。

---

現在，當我單擊.post-link ，似乎一切都立即發生。 如何格式化以下代碼，以確保一個事件在另一個事件完成之后發生？

本質上， 這就是我要重新創建的內容 。 當您單擊帖子時，請注意隱藏的容器如何打開以顯示正在加載的動畫，然后在加載內容后打開它以顯示內容。

JS

$('.post-link').click(function(e) {

    e.preventDefault();

    $('html, body').animate({
        scrollTop : 0
    },500, function() {
        $('#loading-animation').show();
    });

    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            $('#loading-animation').hide();
        return false;
        }
    });

});

的HTML

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <div id="project-container">
            <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
        </div>

        <!-- Start the loop -->
        <?php $home_query = new WP_Query('post_type=projects');

        while($home_query->have_posts()) : $home_query->the_post(); ?>

            <a class="post-link" href="#" rel="<?php the_ID(); ?>">
                <article id="post-<?php the_ID(); ?>">
                    <div class="post-info">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                    </div>
                    <?php the_post_thumbnail( "home-thumb", array( 'class' => 'grayscale grayscale-fade') ); ?>
                </article><!-- #post-## -->
            </a>

        <?php endwhile; ?>
        <?php wp_reset_postdata(); // reset the query ?>

    </main><!-- #main -->
</div><!-- #primary -->

的PHP

/**
 * Enqueue scripts and styles.
 */
function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-effects-core');

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'gray', get_template_directory_uri() . '/js/min/jquery.gray.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array('jquery'), '', true );
    wp_localize_script( 'includes', 'site', array(
                'theme_path' => get_template_directory_uri(),
                'ajaxurl'    => admin_url('admin-ajax.php')
            )
    );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

/**
 * Return the post content to the AJAX call
 */
function my_load_ajax_content () {
    $args = array(
        'p' => $_POST['post_id'], 
        'post_type' => 'projects' 
        );
    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">

        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

        <?php the_content(); ?>

    </div><!-- #post-## -->

    <?php       
    endwhile;           
    exit;
}
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

Answer 1

加載第一篇文章后，您的＃loading-animation文件將被刪除，您將無法再與之互動。

嘗試將ajax內容加載到＃project-container中的另一個包裝器元素中

的HTML

   <div id="project-container">
     <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
     <div class="ajax-wrapper"></div>
   </div>

JS

      [...]
      success: function(response) {
         $('#project-container .ajax-wrapper').html(response);
         $('#loading-animation').hide();
         return false;
      }
      [...]

Answer 2

您必須將Ajax調用放入.show（）函數中以鏈接動畫。

http://api.jquery.com/show/

$('.post-link').click(function(e) {

    e.preventDefault();
    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    $('html, body').animate({
        scrollTop : 0
    },500, function() {
        $('#loading-animation').show(500, function() {
            $.ajax({
                type: 'POST',
                url: ajaxURL,
                data: {'action': 'load-content', post_id: post_id },
                success: function(response) {
                    $('#project-container').html(response);
                    $('#loading-animation').hide();
                    return false;
                }
            });
        });
    });
});