div 内容多次更改后 slideDown 不起作用

Question

我不明白为什么我的 slideDown 只能在第一次运行。我有一个元素，单击它会将内容添加到空 div，然后滑动 div 打开。在该动态 div 内容中有一个元素，当单击该元素时，div 会关闭，然后清空 div 内容。

这在第一轮中工作正常，但在单击 "close" 元素后，"open" 元素将不再滑下 div。还是替换了内容，但是第二次下滑就不行了

在我的实际项目中，内容是通过 ajax 请求生成的，但我能够在具有基本硬编码动态内容的 Fiddle 中复制该问题。

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() 的回调：

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

div 内容多次更改后 slideDown 不起作用

slideDown not working after div content changes more than once

jquery

slidedown

slideup

dynamic-content