Question

我收到了一篇文章列表，其中包含＆＃34; expand＆＃34;在里面。我用这段代码解雇了扩展：

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

您遇到的问题是，您只在页面加载时将click事件绑定到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，但将click事件绑定到文档的概念应该有效。

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

1 个答案: