slideDown не работает после изменения содержимого div более одного раза

Question

Я не могу понять, почему мой slideDown работает только в первый раз. У меня есть элемент, который при нажатии добавляет содержимое в пустой div, а затем открывает div. Внутри этого динамического содержимого div есть элемент, который при нажатии на слайды div закрывается, а затем опустошает содержимое div.

Это отлично работает, но после того, как элемент «close» был нажат, элемент «open» больше не будет перемещаться по div. Он по-прежнему заменяет содержимое, но слайд вниз не работает во второй раз.

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

Fiddle: https://jsfiddle.net/mp72cjm1/1/

$('body').on('click', 'span.open', function(){ 
    var content = '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'; 
    content += '<br><span class="close">Close</span>'; 
    var container = $('div#content'); 
    $(container).html($(content)).slideDown(1000); 
}); 
$('body').on('click', 'span.close', function(){ 
    var container = $('div#content'); 
    $(container).slideUp(1000).queue(function(){ $(this).html(''); }); 
}); 

Answer 1

Вам не нужно использовать .queue() там. Вместо того, чтобы использовать функцию обратного вызова .slideUp() «S:

var container = $('div#content'); 
$('body').on('click', 'span.open', function() { 
    var content = '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'; 
    content += '<br><span class="close">Close</span>'; 
    $(container).html($(content)).slideDown(1000); 
}); 
$('body').on('click', 'span.close', function() { 
    $(container).slideUp(1000, function() { 
     $(this).html(''); 
    }); 
}); 

jsFiddle example