jQuery没有触发动态生成的内容

Question

我得到了一个包含“展开”的文章列表。我正在使用以下代码触发扩展：

var collapsedSize = '50px';
$('.page-press .article-text-wrapper').each(function() {
    console.log("yes");
    var _this = $(this);
    var _thisLink = $(this).find(".article-icon-showmore");
    var h = this.scrollHeight;
    _thisLink.on('click', function(e) {
        e.preventDefault();

        if($(this).hasClass("showless")) {
            _this.find(".article-text").css('height', collapsedSize);
            $(this).text("mehr anzeigen").removeClass("showless");
        } else {
            _this.find(".article-text").css('height', h);
            $(this).text("weniger anzeigen").addClass("showless");
        }   
    });
});  

但我正在通过 ajax 调用为文章列表加载更多内容，并填写一个 html 模板并将其附加到父 div 中。

上面的代码不适用于新生成的内容。为什么？

Answer 1

您遇到的问题是您将点击事件仅绑定到页面加载时 DOM 中的元素。如果您改为将 click 事件绑定到文档并提供选择器，则它也适用于 JavaScript 运行后添加的元素。

我认为它应该是这样工作的：

    var collapsedSize = '50px';
    $(document).on('click', '.page-press .article-text-wrapper .article-icon-showmore', function(e) {
        e.preventDefault();
        var $articleTextWrapper = $(this).parents('.article-text-wrapper');
        if ($(this).hasClass("showless")) {
            $articleTextWrapper.find(".article-text").css('height', collapsedSize);
            $(this).text("mehr anzeigen").removeClass("showless");
        } else {
            $articleTextWrapper.find(".article-text").css('height', $articleTextWrapper[0].scrollHeight);
            $(this).text("weniger anzeigen").addClass("showless");
        }
    });

没有 HTML 我无法测试这个 JavaScript，但是将点击事件绑定到文档的概念应该可以工作。