JQuery AJAX вызов, возвращающий двойной результат

Question

У меня есть вызов ajax в jQuery, загружающий некоторые элементы в 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: function(html){
    $('#feed .loading').fadeOut();
    $("#feeditems").append(html).slideDown()
}

Answer 1

Я думаю, что проблема в селекторе, который вы используете в обратном вызове success, $('#feed .loading') соответствует двум элементам и, таким образом, дважды вызывает $("#feeditems").append(html).slideDown('slow');. Если ваша разметка содержит элемент с классом loading при загрузке страницы, обратный вызов beforeSend также добавляет div с классом loading. Так что вам нужно будет либо придумать другой селектор в обратном вызове success, либо не иметь несколько div с классом loading.

Здесь я воспроизвожу вопрос:

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

Вы можете добавить эту строку кода к вашему обратному вызову success, чтобы увидеть, сколько элементов соответствует:

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

Я исправляю проблему с помощью более специфичного селектора:

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