ajax加载后跳窗口

Question

我有一个w /无限滚动http://www.hvac-hacks.com的博客，我也在每个帖子上加载了ajax评论。评论ajax加载后，顶部帖子没有跳转，但随着你进一步下降，当你继续加载更多页面时，跳跃变得越来越糟。我读到我只需要使用return false并将其放在每个函数中它仍然会跳转。

编辑： 有一块JS应该正确地移动它，但不确定它是什么。

if ( location.hash ){
                        $('html, body').animate({
                            scrollTop: $( location.hash ).offset().top
                        });
                        $( location.hash ).addClass( 'inline-comments-highlight' );
                    }

JS：

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

    // $('#default_add_comment_form textarea').textareaAutoExpand();

    /**
     * Default ajax setup
     */
    $.ajaxSetup({
        type: "POST",
        url: _inline_comments.ajaxurl,
        dataType: "html"
    });


    window.inline_comments_ajax_load_template = function( params, my_global ) {

        var my_global;
        var request_in_process = false;

        params.action = "inline_comments_load_template";

        $.ajax({
            data: params,
            global: my_global,
            success: function( msg ){
                $( params.target_div ).fadeIn().html( msg );
                request_in_process = false;
                if (typeof params.callback === "function") {
                    params.callback();
                }
                return false;
            }
        });
        return false;
    }

    /**
     * Submit new comment, note comments are loaded via ajax
     */
     $( document ).on('submit','.default-add-comment-form',function( e ) {
        event.preventDefault();

        var $this = $(this);
        $this.css('opacity','0.5');
        var full_id = this.id;
        var explode_post_id = full_id.split("-",2);
        var post_id = explode_post_id[1];
        console.log ("posting a comment for post id: #"+post_id);

        data = {
            action: "inline_comments_add_comment",
            post_id: post_id,
            user_name: $('#inline_comments_user_name_'+post_id).val(),
            user_email: $('#inline_comments_user_email_'+post_id).val(),
            user_url: $('#inline_comments_user_url_'+post_id).val(),
            comment: $( '#comment_'+post_id ).val(),
            security: $('#inline_comments_nonce_'+post_id).val()
        };
        console.log ("data stream(var array data):");
        console.log ("* action: "+data.action);
        console.log ("* post_id: "+data.post_id);
        console.log ("* user_name: "+data.user_name);
        console.log ("* user_url: "+data.user_url);
        console.log ("* comment: "+data.comment);
        console.log ("* security: "+data.security);
        console.log ("---end");

        console.log ("target_div: "+"#inline_comments_ajax_target_"+post_id);
        console.log ("template: " + $( '#inline_comments_ajax_handle' ).attr( 'data-template' ));
        console.log ("post_id: " + post_id);
        console.log ("security: " + $( '#inline_comments_nonce_'+post_id ).val());
        $.ajax({
            data: data,
            global: false,
            success: function( msg ){
                inline_comments_ajax_load_template({
                    "target_div": "#inline_comments_ajax_target_"+post_id,
                    "template": $( '#inline_comments_ajax_handle' ).attr( 'data-template' ),
                    "post_id": post_id,
                    "security": $( 'inline_comments_nonce_' +post_id).val()
                } );
                $('textarea').val('');
                $this.css('opacity','1');
                return false;
            },
            fail: function(){
                console.log("ajax failed");
            },
                always: function(){
                console.log(msg);
            }
        });

    });

    /**
     * Allow Comment form to be submitted when the user
     * presses the "enter" key.
     */
    $(document).on('keypress', '.default-add-comment-form',function (e) {
      if (e.which == 13) {
        console.log ("Enter Key Pressed - Submitting form");
        console.log (this);
        console.log ($(this));
        $(this).submit();
        return false;
      }
    });

    $(window).on('scroll.inline-ajax-comments', function (e) {
        var elem = isScrolledIntoView('.inline-comments-ajax-start')

        if (elem)
        {
            var $elem = jQuery(String(elem));

            if ($elem.hasClass('inline-comments-loaded')) {
                //console.log($elem+'already loaded');
                return false;
                } 
            else {
                $elem.addClass('inline-comments-loaded');
                console.log('Load comments for '+$elem);
                console.log('post id: '+$elem.attr('data-id'));
                inline_comments_ajax_load($elem.attr('data-id'))
                }

        }

    });



    window.inline_comments_ajax_load = function(post_id){
        //console.log("load comments for post "+post_id+"...");
        if ( $( '#inline_comments_ajax_handle_'+post_id ).length ) {
            $( '.inline-comments-loading-icon').show();

            data = {
                "action": "inline_comments_load_template",
                "target_div": '#inline_comments_ajax_target_'+post_id,
                "template": $( '#inline_comments_ajax_handle').attr( 'data-template' ),
                "post_id": post_id,
                "security": $('#inline_comments_nonce_'+post_id).val()
            };
            console.log("loading comments for post: "+data.post_id);
            $.ajax({
                data: data,
                success: function( msg ){
                    $( '.inline-comments-loading-icon').fadeOut();
                    $( "#inline_comments_ajax_target_"+post_id).fadeIn().html( msg ); // Give a smooth fade in effect
                    if ( location.hash ){
                        $('html, body').animate({
                            scrollTop: $( location.hash ).offset().top
                        });
                        $( location.hash ).addClass( 'inline-comments-highlight' );
                    }
                    return false;
                }
            });

            $( document ).on('click', '.inline-comments-time-handle', function( e ){
                $( '.inline-comments-content' ).removeClass('inline-comments-highlight')
                comment_id = '#comment-' + $( this ).attr('data-comment_id');
                $( comment_id ).addClass('inline-comments-highlight');
            });
        }
        return false;
    }

    $( document ).on('click','.inline-comments-more-handle', function( e ){
        event.preventDefault();
        //Get the post id
        var full_id = this.id;
        var explode_post_id = full_id.split("_",2);
        var post_id = explode_post_id[1];
        console.log (post_id);

        if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){
                $( 'a', this ).html( _inline_comments.custom_more.more );
                 $('#comment_'+post_id).animate({height: '32'},250);
                 } else {
            $( 'a', this ).html( _inline_comments.custom_more.less );
             $('#comment_'+post_id).animate({height: '100'},250);
        }
            $( this ).toggleClass('inline-comments-more-open_'+post_id);
            $('#inline-comments-more-container_'+post_id).toggle();
    });


    /*
    window.inline-comments-more-toggle = function(post_id){

        if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){
            $( 'a', this ).html('●●●');
            $('#comment').css('height', '32');
        } else {
            $( 'a', this ).html('↑↑↑');
            $('#comment').css('height', '150');
        }
        $( this ).toggleClass('inline-comments-more-open_'+post_id);
        $('#inline-comments-more-container_'+post_id).toggle();
    }
    */

    window.isScrolledIntoView = function(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemInView = false;
        $( elem ).each(function() {
            $this = $(this);

            elemTop = $this.offset().top;
            elemBottom = elemTop + $this.height();
            if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {

                elemInView = $this.attr('data-id');
            }
        });
        //if (elemInView) console.log(elemInView+ " is in view!!!!");
        if (elemInView) return elem+'[data-id="'+elemInView+'"]';

    }


});

PHP

<?php

/**
 * Our comments form template, the comments loop is loaded via html from inline_comments_load_template()
 */
if ( !defined( 'ABSPATH' ) ) die( 'You cannot access this template file directly' );

?>
<?php
    $name = 'Name&#8230';
    $email = 'Email&#8230';
    $website = 'Website&#8230';
    $user_email = null;
    $user_website = null;
    $user_name = null;
    $keep_open = get_option('keep_open');
    $custom_more = get_option('custom_more');
    $more = inline_comments_options( 'custom_more', empty( $custom_more ) ? 'default' : $custom_more );

    if ( is_user_logged_in() ){
        $current_user = wp_get_current_user();
        $user_name = $current_user->display_name;
        $user_email = $current_user->user_email;
        $user_website = $current_user->user_url;
    }
?>

<noscript>JavaScript is required to load the comments.</noscript>
<div class ="inline-comments-ajax-start" data-id="<?php echo $post->ID; ?>" ></div>
<div class="inline-comments-container" id="inline-comments-container_<?php echo $post->ID; ?>" name="comments" >
    <div id="inline_comments_ajax_handle_<?php echo $post->ID; ?>" id="inline_comments_ajax_handle" class="inline_comments_ajax_handle last-child" data-post_id="<?php echo $post->ID; ?>">
    <div id="inline_comments_ajax_target_<?php echo $post->ID; ?>" style="display: none;" ></div>
    <div class="inline-comments-loading-icon">Loading Comments&#8230;</div>
    <input type="hidden" name="inline_comments_nonce" value="<?php print wp_create_nonce('inline_comments_nonce'); ?>" id="inline_comments_nonce" />
    <?php if ( get_option('comment_registration') != 1 || is_user_logged_in() ) : ?>
        <div class="inline-comments-content inline-comments-content-comment-fields">
            <div class="inline-comments-p">
                <form action="javascript://" method="POST" id="default_add_comment_form-<?php echo $post->ID; ?>" class="default-add-comment-form">
                    <input type="hidden" name="inline_comments_nonce_<?php echo $post->ID; ?>" value="<?php print wp_create_nonce('inline_comments_nonce_'.$post->ID); ?>" id="inline_comments_nonce_<?php echo $post->ID; ?>" />
                    <?php inline_comments_profile_pic(); ?>
                    <textarea placeholder="Press enter to submit comment&#8230;" tabindex="4" id="comment_<?php echo $post->ID; ?>" name="comment" id="inline-comments-textarea" class="inline-comments-auto-expand submit-on-enter"></textarea>
                    <span id ="inline-comments-more-handle_<?php echo $post->ID; ?>" class="inline-comments-more-handle"><a href="#"><?php echo $more['more']; ?></a></span>
                    <div id = "inline-comments-more-container_<?php echo $post->ID; ?>" class="inline-comments-more-container" <?php if ( $user_email != null && isset( $keep_open ) && $keep_open != "on" ) : ?>style="display: none;"<?php endif; ?>>
                        <div id="inline-comments-allowed-tags-container_<?php echo $post->ID; ?>" class="inline-comments-allowed-tags-container">
                            Allowed <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:
                            <code>&lt;a href="" title=""&gt; &lt;blockquote&gt; &lt;code&gt; &lt;em&gt; &lt;strong&gt;</code>
                        </div>
                        <div class="inline-comments-field"><input type="text" tabindex="5" name="user_name" class="inline_comments_user_name" id="inline_comments_user_name_<?php echo $post->ID; ?>" placeholder="<?php print $name; ?>" value="<?php print $user_name; ?>"  /></div>
                        <div class="inline-comments-field"><input type="email" required tabindex="5" name="user_email" class="inline_comments_user_email" id="inline_comments_user_email_<?php echo $post->ID; ?>" placeholder="<?php print $email; ?>" value="<?php print $user_email; ?>"  /></div>
                        <div class="inline-comments-field"><input type="url" required tabindex="6" name="user_url" class="inline_comments_user_url" id="inline_comments_user_url_<?php echo $post->ID; ?>" placeholder="<?php print $website; ?>" value="<?php print $user_website; ?>" /></div>
                    </div>
                </form>
            </div>
        </div>
    <?php else : ?>
        <div class="callout-container">
            <p>Please <?php echo wp_register('','', false); ?> or <a href="<?php print wp_login_url(); ?>" class="inline-comments-login-handle">Login</a> to leave Comments</p>
        </div>
    <?php endif; ?>
    </div>
</div>
<script id="inline-comments-script-<?php echo $post->ID; ?>" class="inline-comments-script" >
/*
    //console.log ('<?php echo $post->ID; ?>' + 'has loaded...');
    var tid_<?php echo $post->ID; ?> = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
        clearInterval( tid_<?php echo $post->ID; ?> );
        //console.log ('running script for post id: <?php echo $post->ID; ?>');
        inline_comments_ajax_load(<?php echo $post->ID; ?>)
    }, 100 );
    */
</script>

Answer 1

感谢用户@DDS ...

问题是css问题，主要是“loading”div使用.fadeOut导致display：none - 而是使用.fadeTo，现在它工作得很好！

更改： $( '.inline-comments-loading-icon').fadeOut();至$( '.inline-comments-loading-icon').fadeTo( 1000, 0 );