jquery less/more text dynamic content

Question

I've got this mustache template:

<script id="stemplate" type="text/template">
    {{#data}}
        <li class="service-listitem">
            <div class="lstHeading"><b>{{Type}}:</b> {{Name}}</div>
            <div class="service-item">
                <div class="infoCap">
                    {{Information}}
                </div>
            </div>
        </li>
    {{/data}}
</script>

which is used for infinite scroll.

But Information has a max length of 500 chars, and I want to limit it with 100/150 with a text truncator. I found jTruncate and tried to use it like this:

$('.infoCap').jTruncate({
    length: 100,
    minTrail: 0,
    moreText: "[see all]",
    lessText: "[hide extra]",
    ellipsisText: " (truncated)",
    moreAni: "fast",
    lessAni: 2000
});

But this doesn't work for dynamically added content. I should be using on(), but there is no event that I know of that jTruncate supports for this purpose.

So I'm kind of stuck here. Any one knows how to accomplish this? Doesn't necessarily have to be jTruncate.

Answer 1

I fixed this by adding $('.infoCap').expander(); in the success function of an AJAX call.

Note that expander() is from another plug in that does the same thing as JTruncate, but has some more options.

Answer 2

Sounds somewhat related to Mustache doesn't handle events properly. Might just need that callback option so your template has time to render.

Answer 3

First time i see this kind of problem. Maybe a trick would be to assign the value attribute to the element right before '.service-listitem'.

Every time you dynamically add content then you will also randomly change the value attribute with another value. By this way i think you create a potential 'change' event.

If that works then it is easy to to something like this:

$('.element_with_value').on('change', function(){

    $('.infoCap').jTruncate({

        length: 100,
        minTrail: 0,
        moreText: "[see all]",
        lessText: "[hide extra]",
        ellipsisText: " (truncated)",
        moreAni: "fast",
        lessAni: 2000

    });

});

First time i face this problem so this is a potential solution.