Я пытаюсь добавить div и загрузить в него содержимое с помощью AJAX, но div остается пустым

Question

Я пытаюсь добавить div и загрузить в него содержимое с помощью AJAX, но div остается пустым

$('#primary').fadeOut('slow', function(){
        $('#primary').prepend('<div id="content"/>', function(){
            $('#content').load(link+' #content', function(){
                $('#primary').fadeIn('slow');
            });
        });
    });

Answer 1

Метод .prepend не принимает обратный вызов, потому что он не асинхронный.

Вы можете передать функцию в качестве первого аргумента, но она не так полезна для добавления только одного элемента.

Вот ваш код исправлен.

$('#primary').fadeOut('slow', function(){
    var content = $('<div id="content"/>'),
        primary = $(this);
    primary.prepend( content );
    content.load(link + ' #content', function(){
        primary.fadeIn('slow');
    });
});

Answer 2

Попробуйте что-то вроде следующего:

$('#primary').fadeOut('slow', function(){
    var primary = this;
    $('<div id="content"/>')
        .prependTo(primary)
        .load(link+' #content', function(){
            $(primary).fadeIn('slow');
        });
    });
});

Метод .prepend() не принимает обратный вызов.Я использовал .prependTo() вместо этого (который также не принимает обратный вызов), потому что он сохраняет контекст, поэтому вызов .load() может быть связан.

Answer 3

prepend не имеет обратного вызова, это немедленное изменение.Попробуйте это:

$('#primary').fadeOut('slow', function(){
    $('<div id="content"/>').prependTo('#primary')
         .load(link+' #content', function(){
            $('#primary').fadeIn('slow');
        });
});