jQuery追加未加载元素的JavaScript

Question

我正在制作一个包含电影详细信息的无休止的滚动表，并且在电影故事情节中，我有一个简单的/少/少的javascript函数（当您单击更多时，它将显示所有文本，而当您单击较少时，它会将其隐藏）。桌子看起来不错。 问题在于，在前十部电影之后，当无限滚动滚动到“更多/更少”功能时，其余电影将不起作用，并且会显示整个故事情节。

无尽的滚动脚本：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('div#loadingModal').show();
            $.ajax({
                url: "movies.php?lastMovie=" + $(".postedMovies:last").attr('id'),
                success: function (html) {
                    $('div#loadingModal').hide();
                    if (html) {
                        $("#postedMovies").append(html);
                    }
                }
            });
        }
    });
});

或多或少的方法：

$(document).ready(function () {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar - 1, content.length - showChar);

        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;
});

}）;

php回声

echo "<tr class='postedMovies' id=\" $fuid \">";

echo'    

            <td>'.$_SESSION['fid'].'</td>
            <td><img width="51px" height="72px"   src="'.$movie_posterlarge.'" /></td>
            <td><a target="_blank" href="'.$movie_url.'">'.$movie_title.'</a></td>
            <td>'.$movie_released.'</td>
            <td>'.$movie_genres.'</td>
            <td>'.$movie_rating_imdb.'</td>
            <td>'.$movie_rating_user.'</td>
            <td width="200 px">'.$movie_viewed.'</td>
            <td style="text-align:left"><div class="comment more">'.$movie_storyline.'</div></td>


        ';

echo "</tr>";

这是输出：

http://i.imgur.com/vzb8ipa.png

Answer 1

尝试添加dataType ：

$(document).ready(function() { 
    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {    
            $('div#loadingModal').show();
            $.ajax({
                url: "movies.php?lastMovie="+ $(".postedMovies:last").attr('id'),
                dataType: 'html',
                success: function(html) {
                    $('div#loadingModal').hide();
                    if(html){       
                        $("#postedMovies").append(html);
                    }
                }
            });
        }
    });
});

否则，根据您要返回的内容，jQueryify html数据：

$("#postedMovies").append($(html))

Answer 2

我认为您必须在每个ajax调用之后添加more指向新元素的链接。 并使用jQuery.on添加点击侦听器，它将处理新添加的元素。

希望这会有所帮助-

var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";

function addMoreLink($elements) {
    $elements.each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);
            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);
        }
    });
}

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('div#loadingModal').show();
            $.ajax({
                url : "movies.php?lastMovie=" + $(".postedMovies:last").attr('id'),
                success : function(html) {
                    $('div#loadingModal').hide();
                    if (html) {
                        var newElements = $(html);
                        $("#postedMovies").append(newElements);
                        addMoreLink(newElements.find('.more'));
                    }
                }
            });
        }
    });

    addMoreLink($('.more'));

    /* using jquery on, will take care of newly added elements */
    $("table").on("click", ".morelink", function(event) {
        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;
    });
});