jQuery ajax 调用返回双重结果答案

【问题标题】：jQuery ajax call returning double resultsjQuery ajax 调用返回双重结果
【发布时间】：2011-07-13 01:36:58
【问题描述】：

我在 jQuery 中有一个 ajax 调用，将一些元素加载到一个 div 中。

调用有效，但由于某种原因返回了重复的响应。该调用应返回两个元素，但我得到 4 个（两个正确的项目，重复一次）。

这是我的 ajax 调用：

$.ajax({
    url: "<?php echo site_url('feed/editor/2'); ?>",
    cache: false,
    beforeSend: function(){
        $('#feed-nav').after('<div class="loading"></div>', function(){
            $("#feeditems").fadeOut();
        });
    },
    success: function(html){
        $('#feed .loading').fadeOut('fast', function(){
            $("#feeditems").append(html).slideDown('slow');
        });
    }
});

return false;

我看不出为什么会发生这种情况！？

更新

我将成功函数修改为下面的代码，似乎已经修复了它，虽然我不太明白为什么。

success: function(html){
    $('#feed .loading').fadeOut();
    $("#feeditems").append(html).slideDown()
}

【问题讨论】：

你看到萤火虫发生了什么？调用真的只返回 2 个元素的数据吗？
从您发布的代码中，我也不能 - feed/editor/2 返回的是什么。从您的代码看来，您的服务器正在返回四个元素，而不是 JS 将其加倍？
除了使用 Firebug 来查看调用返回的内容之外，还值得检查调用是否发生了两次——如果 ajax 调用是由事件处理程序触发的，您可能已经绑定了处理程序两次或一些这样的；这是相当普遍的，例如stackoverflow.com/questions/1536660/…
只要检查一下 Firebug，它肯定只返回 2 个项目。
ajax 调用只是在主要的 onready jquery 代码块中。

标签： jquery ajax

【解决方案1】：

我认为问题在于您在 success 回调中使用的选择器，$('#feed .loading') 匹配两个元素，因此两次调用 $("#feeditems").append(html).slideDown('slow');。如果您的标记在页面加载时包含带有loading 类的元素，则beforeSend 回调也会添加带有loading 类的div。因此，您要么需要在 success 回调中提供不同的选择器，要么在 loading 类中没有多个 div。

我在这里重现问题：

http://jsfiddle.net/2PR4V/2/

您可以将这行代码添加到您的success 回调中以查看有多少元素匹配：

console.log($('#feed .loading').size());

我在这里使用更具体的选择器解决了这个问题：

http://jsfiddle.net/2PR4V/3/

【讨论】：

哇，你是绝对正确的。我在修改css时添加了另一个.loading div来查看，这正是问题所在。谢谢！
我用我的跨域千里眼，抢到了你的标记！
哈哈，我在添加内容时遇到了问题……它正在翻倍，因为我在另一个地方有相同的类名。现在修复它：D 感谢您对这篇文章的回答