jQuery Ajax Loader / Spinner

Question

目前我有以下jQuery / Ajax，以便在用户点击div时加载评论：

                function showComments(post_id) {
                    $("#comment-"+post_id).toggle();
                    $.ajax({ 
                         dataType: 'html',
                         cache: false,
                         url: 'ajax.php',
                         type: 'POST',
                         data: {comments: post_id}
                    }).done(function(html) { 
                        $('#comment-'+post_id).html(html)
                    });
                }

这一切都运行正常，因为默认的div中有微调器，直到内容加载为止。但是，如果用户再次单击它以隐藏它，则单击以再次显示微调器不会显示，因为内容未显着重置。所以我尝试使用.toggles鼠标事件处理程序：

                function showComments(post_id) {
                    $("#comment-"+post_id).toggle(function() {
                        $('#comment-'+post_id).show();
                        $.ajax({ 
                            dataType: 'html',
                            cache: false,
                            url: 'ajax.php',
                            type: 'POST',
                            data: {comments: post_id}
                        }).done(function(html) { 
                            $('#comment-'+post_id).html(html)
                        });   
                    }, function() {
                        $('#comment-'+post_id).hide();
                        $('#comment-'+post_id).html('<img src="/loader.gif" />')
                    });
                }

但是，这次没有任何作用，div没有显示或隐藏，并且没有调用Ajax。我可能做错了什么想法？

编辑：

这是HTML / PHP：

                           <div class="comments right" title="Click to view comments" onclick="showComments('.$post['id'].')">'.$post['comments_cache'].'</div>
                            <div style="display:none" id="comment-'.$post['id'].'" class="top-15"><img src="/loader.gif" /></div>

上面没有任何问题，它对我展示的第一个功能很好。

Answer 1

通过执行以下操作来修复它：

            function showComments(post_id) {
                if ($('#comment-'+post_id).html().length > 0) {
                    $('#comment-'+post_id).empty().hide();
                } else {
                    $('#comment-'+post_id).html('<img src="loader.gif" />').show();
                    $.ajax({ 
                         dataType: 'html',
                         cache: false,
                         url: 'ajax.php',
                         type: 'POST',
                         data: {comments: post_id}
                    }).done(function(html) { 
                        $('#comment-'+post_id).html(html)
                    }); 
                }
            }

Answer 2

您可以使用jQuery的beforeSend属性，并在div打开时向div添加一个类'open'以跟踪显示。

function showComments(post_id) {
  $("#comment-" + post_id).click(function () {
    if (!$(this).hasClass('open')) {
      $.ajax({
        dataType: 'html',
        cache: false,
        beforeSend: function () {
          $(this).show().addClass('open');
        },
        url: 'ajax.php',
        type: 'POST',
        data: {
          comments: post_id
        },
        success: function (html) {
          $(this).html(html);
        }
      });
    } else {
      $(this).hide().html('<img src="/loader.gif" />').removeClass('open');
    }
  });
}