jQuery Ajax加载程序/微调器

目前，为了在用户单击div时加载注释，我使用了以下jQuery/Ajax：

                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中有微调器，直到加载内容后才会显示。但是，如果用户再次单击以隐藏它，然后再次单击以显示微调器不会出现，因为内容没有明显重置。所以我尝试使用。切换鼠标事件处理程序：

                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" />')
                    });
                }

函数showComments（post_id）{
$（“#注释-”+post_id）.toggle（函数（）{
$（'#comment-'+post_id）.show（）；
$.ajax（{
数据类型：“html”，
cache:false，
url:'ajax.php'，
键入：“POST”，
数据：{注释：post_id}
}).done（函数（html）{
$（'#comment-'+post_id）.html（html）
});   
}，函数（）{
$（'#comment-'+post_id）.hide（）；
$（“#注释-”+post_id）.html（“”）
});
}

然而，这一次，一切都不起作用，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>

。$post['comments\u cache']

上述功能没有问题，它与我向您展示的第一个功能配合得很好。

通过执行以下操作修复了此问题：

            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)
                    }); 
                }
            }

函数showComments（post_id）{
if（$（'#comment-'+post_id）.html（）.length>0）{
$（'#comment-'+post_id）.empty（）.hide（）；
}否则{
$（'#comment-'+post_id）.html（'..show（）；
$.ajax（{
数据类型：“html”，
cache:false，
url:'ajax.php'，
键入：“POST”，
数据：{注释：post_id}
}).done（函数（html）{
$（'#comment-'+post_id）.html（html）
}); 
}
}

您可以使用jQuery的

beforeSend

属性，并在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');
    }
  });
}

函数showComments（post_id）{
$（“#注释-”+发布id）。单击（函数（）{
if（！$（this）.hasClass（'open'））{
$.ajax({
数据类型：“html”，
cache:false，
beforeSend:函数（）{
$（this.show（）.addClass（'open'）；
},
url:'ajax.php'，
键入：“POST”，
数据：{
评论：post_id
},
成功：函数（html）{
$（this）.html（html）；
}
});
}否则{
$（this.hide（）.html（“”）.removeClass（'open'）；
}
});
}

添加了HTML/PHP，即使它没有任何问题，否则第一个函数将无法工作…结果我认为.toggle mouse事件处理程序已被弃用。。