jQuery 未触发动态生成的内容

Question

我得到了一个包含 "expand" 的文章列表。我正在使用以下代码启动扩展：

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 中的元素。如果您改为将点击事件绑定到文档并提供一个选择器，它也适用于 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，但是将点击事件绑定到文档的概念应该可行。

jQuery 未触发动态生成的内容

jQuery not firing on dynamically generated content

each

jquery

dynamic-content