ajax加载后的jQuery .each

i have several divs with class"revstory" and more are added with ajax. prolem is, when ajax loads, the loaded divs aren't affected by the jquery script.

I've tried to add the script also in the ajax file. the function works 2 times.

i've used ajaxComplete now it works many times! i've been trying this for a while now . hope someone can guide me to the right solution. Thanks in advance

<div id=#review class="revstory less">
</div>

JavaScript:

function sf() {

    var less = '60px';
    var more = '300px';
    $('.revstory').each(function () {
        var rev = $(this);
        var h = this.scrollHeight;
        console.log(h);

        if (h > 70) {

            rev.css('height', less);
            rev.addClass("less");
            var l = rev.text();

            rev.text(l.substr(0, 155) + '..');

            // rev.after('<a id="more" class="item" href="#">Read more</a><br/>');
            // var link = rev.next();
        }


        rev.on('click', function () {

            if (rev.hasClass("less")) {
                rev.animate({
                    'height': h
                });
                rev.text(l.substr(0, 555));
                rev.removeClass("less");
            } else {
                rev.addClass("less");
                rev.animate({
                    'height': less
                });
                rev.text(l.substr(0, 155) + '..');
            }
            // rev.css('height', h);

            // alert(rev.attr('id'));
        });

    });
}

I think that you change this line:

rev.on('click',function(){

To:

rev.live('click',function(){

Maybe this can work

It's unusual to declare an event handler inside a function. Try moving rev.on('click' out of your sf() function and replace it with $(document).on('click', '.revstory'

$(document).on('click', '.revstory', function() {
    var rev = $(this);                          // add this line, too
    if (rev.hasClass("less")) {
        rev.animate({
            'height': h
        });
        rev.text(l.substr(0, 555));
        rev.removeClass("less");
    } else {
        rev.addClass("less");
        rev.animate({
            'height': less
        });
        rev.text(rev.text().substr(0, 155) + '..'); // also update this
    }
    // rev.css('height', h);
    // alert(rev.attr('id'));
});

function sf() {    
    var less = '60px';
    var more = '300px';
    $('.revstory').each(function () {
        var rev = $(this);
        var h = this.scrollHeight;
        console.log(h);

        if (h > 70) {
            rev.css('height', less);
            rev.addClass("less");
            var l = rev.text();
            rev.text(l.substr(0, 155) + '..');
            // rev.after('<a id="more" class="item" href="#">Read more</a><br/>');
            // var link = rev.next();
        }
    });
}