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