jQuery ajax 调用返回双结果

Question

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

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

这是我的 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 函数修改为下面的代码，似乎已经修复了它，尽管我不太明白为什么。

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

Answer 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/