jQuery 脚本无法处理附加数据

Question

我正在做一个包含内容块的无限滚动网页。每个块都有一个

用于添加描述的标签。此描述应包含相对于其长度的更多/更少按钮。脚本适用于第一个加载的内容块。我的问题是，在滚动时，会附加新块，其中更多/更少按钮未显示。

我的 html p 标签类是“wall_post_para”

我的脚本是

var showChar = 100;
var ellipsestext = "...";
var moretext = "More";
var lesstext = "Less";

$('.wall_post_para').each(function() 
{
    var content = $(this).html();
    if(content.length > showChar) 
    {

        var c = content.substr(0, showChar);
        //alert(c);
        var h = content.substr(showChar-1, content.length - showChar);
        //alert(h);
        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
         $(this).html(html);
    }

});



 $(".morelink").click(function()
{
    if($(this).hasClass("less"))
    {
        $(this).removeClass("less");
        $(this).html(moretext);
    } 
    else 
    {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

我尝试使用委托，但我不知道如何将委托与 .each() 一起使用。请帮助我。

Answer 1

代表。改变这个：

$(".morelink").click(function()

到这里：

$(document).on('click', '.morelink', function()

这将允许任何附加的.morelink 使用点击处理程序，因为它会遍历文档直到每个 .morelink...

Answer 2

我相信斯图尔特的回答解决了你实际描述的问题一旦解决就会出现的部分问题。 在我看来，您正在运行您的脚本，该脚本仅对具有“wall_post_para”类的段落进行一次迭代。然后将更多这些元素添加到您的页面中。当然，这些不受之前运行过的代码的影响。 您需要做的：每当一个新段落添加到您的页面时，运行添加省略号和“更多”按钮的代码。如何执行此操作取决于添加新段落的方式。也许您想详细说明一下以获得更具体的答案。