jQuery事件未在动态生成内容上触发的问题求助

嘿，这个问题我太熟了——咱在处理动态加载内容的时候经常会踩这个坑！你当前的写法是直接给.article-icon-showmore绑定点击事件，但这些元素是动态生成的，在你执行.each()遍历绑定事件的时候，它们还没被添加到DOM里，自然就没绑定上事件，点击当然没反应啦。

给你一个最靠谱的解决方案：事件委托（Event Delegation），利用事件冒泡的特性，把事件绑定到一个已经存在的静态父元素上，让父元素来捕获子元素的点击事件，不管子元素是一开始就有还是后来动态生成的。

修改后的代码示例 #

var collapsedSize = '50px';

// 绑定到静态存在的父元素（.page-press应该是页面加载时就存在的容器）
$('.page-press').on('click', '.article-icon-showmore', function(e) {
    e.preventDefault();
    var $currentLink = $(this);
    var $wrapper = $currentLink.closest('.article-text-wrapper');
    var $articleText = $wrapper.find('.article-text');

    if ($currentLink.hasClass('showless')) {
        // 收起逻辑
        $articleText.css('height', collapsedSize);
        $currentLink.text("mehr anzeigen").removeClass("showless");
    } else {
        // 展开逻辑（补全你原来没写完的部分）
        $articleText.css('height', $articleText[0].scrollHeight);
        $currentLink.text("weniger anzeigen").addClass("showless");
    }
});

关键说明 #

1. 事件委托的核心：把事件绑定到.page-press这个静态容器上，而不是直接绑定到动态生成的.article-icon-showmore。当点击.article-icon-showmore时，事件会冒泡到.page-press，然后通过第二个参数.article-icon-showmore来筛选触发事件的目标元素，这样不管元素什么时候生成，只要它在.page-press范围内，就能触发事件。
2. 避免绑定到document：虽然绑定到document也能生效，但尽量选择离目标元素最近的静态父元素，这样性能更好，也能减少不必要的事件触发。
3. 简化DOM查询：用.closest()来快速找到当前点击元素所在的.article-text-wrapper，比原来的遍历更高效，也更适配动态场景。

这样修改后，不管你的文章列表是动态加载的还是后续新增的，「展开/收起」按钮的点击事件都能正常触发啦！

内容的提问来源于stack exchange，提问作者Marek123