jquery 延迟加载和其他 Jquery / javascript 函数在追加后不起作用

Question

我正在尝试创建一个页面，用户可以在其中查看图片并喜欢或不喜欢它们。为了使它对用户友好，我正在创建一个函数，当用户单击 "load more post" jquery 时将从服务器获取数据。我为此使用了 append 但 javascript 函数来自附加文件不起作用（功能类似于延迟加载，喜欢和不喜欢）这是我的代码示例。

<div id='updatepost' class='col-md-12'></div>
<div class='col-md-12'>
<button class='btn btn-default' id='loadmore'>Load more post</button>
</div>

<script>
pages1 = 5;
pages2 = 10;
$("#loadmore").on("click", function(event) {
event.preventDefault();
loadData = 'pages1=' + pages1 + '&pages2=' + pages2;
    $.ajax({
    type: "GET",
    url: "loadpost.php",
    data: loadData,
    cache: false,
    success: function(html) {
    $("div#updatepost").prepend(html);
    }
    });

});
</script>
<script type='text/javascript' src='js/loadpost.js'></script>

and here's the loadpost.php and javascript functionsfor likepost, dislikepost and lazy load don't work anymore.

<img data-original='upload-image/uploads/myiamge.jpg'  class='lazy'>
<span class='likepost'>like</span>
<span class='dislikepost'>dislike</span>

Answer 1

使用 lazy loader, which supports auto-initializing / self-initializing.

否则追加后需要调用初始化代码：

$("div#updatepost").prepend(html).find('img.lazyload').lazyload();

但如果您使用了很多 AJAX，我真的建议您使用上面链接的 lazySizes 脚本。正常的 jQuery 延迟加载会在 AJAX 繁重的站点上产生内存泄漏。

对于 like/dislike 功能，您可以使用事件委托：

$('#updatepost').on('click, '.likepost', function(){
    //you like code
});

jquery 延迟加载和其他 Jquery / javascript 函数在追加后不起作用

jquery lazy load and other Jquery / javascript functions don't work after append

javascript

ajax

jquery

lazy-loading

event-handling