Jquery append not loading javascript for element

Jquery append not loading javascript for element

本文关键字：for element javascript loading append not Jquery      更新时间：2023-09-26

我正在制作一个带有电影细节的无尽滚动表，在电影故事情节中，我有一个简单的更多/更少的javascript函数（当您单击更多时，它会显示所有文本，当您单击更少时，它会将其隐藏回来）以使表格看起来不错。问题是，在前 10 部电影之后，当无尽滚动启动更多/更少功能时，它不适用于其余电影，它会显示整个故事情节。

无尽的滚动脚本：

$(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

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>";

这是输出：

https://i.stack.imgur.com/Ftb4e.png

我认为您必须在每次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;
    });
});

尝试添加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))
相关文章：