jQuery脚本不使用附加数据

时间:2016-07-12 09:50:54

标签: jquery delegates

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

标签用于添加描述。此描述应包含更多/更少的按钮,其长度。脚本正在为第一个加载的内容块工作。我的问题是,在滚动时,附加了新的块,其中没有显示更多/更少的按钮。

我的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()委托。请帮帮我。

2 个答案:

答案 0 :(得分:0)

代表。改变这个:

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

到此:

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

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

答案 1 :(得分:0)

我相信斯图尔特的答案解决了一旦您实际描述的问题得到解决就会出现的问题的一部分。 我看到它的方式,你正在运行你的脚本迭代段落&#34; wall_post_para&#34;只有一次。然后,更多这些元素将添加到您的页面中。当然,这些不受以前运行的代码的影响。 你需要做什么:每当一个新的段落添加到你的页面时,运行它上面的代码,添加省略号和更多&#39;按钮。如何执行此操作取决于添加新段落的方式。也许你想详细说明,以获得更具体的答案。