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

【问题标题】：slideDown not working after div content changes more than oncediv内容更改多次后slideDown不起作用
【发布时间】：2015-05-28 03:39:34
【问题描述】：

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

这在第一次运行时效果很好，但是在单击“关闭”元素后，“打开”元素将不再向下滑动 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(''); });
});

【问题讨论】：

标签： jquery slidedown slideup dynamic-content

【解决方案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

【讨论】：