将div扩展为滚动高度

我需要通过css扩展一个溢出设置为隐藏的div。 单击“展开”时，div的高度将扩展到显示整个文本所需的高度。 为此，我使用此代码：

$( ".expand" ).click(function() { $('#mainDiv').animate({ height: $('#mainDiv').get(0).scrollHeight }, 500, function(){ $(this).height('auto'); }); }); 

这与预期的一样，使用如下硬编码段落：

 
Expand … 

现在我想动态地插入这个段落，这取决于div中的文本是否比div更合适。 如果它小于div设置的高度，则不需要此段落。 所以我尝试通过添加一个函数来实现这一点，因为代码现在看起来像这样：

 $(document).ready(function() { var height = $('#mainDiv').prop('scrollHeight'); if(height>420){ $("
Expand …
").insertAfter('#mainDiv'); } }); $( ".aufklappen" ).click(function() { $('#hauptTextInhaltReduziert').animate({ height: $('#hauptTextInhaltReduziert').get(0).scrollHeight }, 500, function(){ $(this).height('auto'); }); }); 

插入段落就好了。 但是：它不起作用，点击段落时没有任何反应。

非常感谢帮助。

Answer 1

您的代码不包含DOM更改。 使用以下内容：

 $( ".aufklappen" ).on("click", function() { ... }); 

Answer 2

使用绑定到容器/正文的委托事件处理程序：
试试这个：

 $('body').on('click', '.aufklappen', function(){ $('#hauptTextInhaltReduziert').animate({ height: $('#hauptTextInhaltReduziert').get(0).scrollHeight }, 500, function(){ $(this).height('auto'); }); }); 

也就是说，绑定到JS运行时存在的元素（页面加载时正文存在），并将第二个参数中的选择器提供给.on（）。 当在body元素上发生单击时，jQuery会检查它是否应用于匹配.aufklappen选择器的元素的子元素。