[英]jquery lazy load and other Jquery / javascript functions don't work after append
我正在嘗試創建一個頁面,用戶可以在其中查看圖片並喜歡或不喜歡它們。 為了使其易於使用,我正在創建一個函數,當用戶單擊“加載更多帖子”時,jquery將從服務器獲取數據。.我為此使用了append,但是來自附加文件的javascript函數不起作用(像lazy這樣的函數加載(喜歡和不喜歡))是我的代碼示例。
<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>
否則,您需要在追加后重新調用初始化代碼:
$("div#updatepost").prepend(html).find('img.lazyload').lazyload();
但是,如果您使用了大量的AJAX,我真的建議您使用上面鏈接的lazySizes腳本。 普通的jQuery lazyload在AJAX重載站點上產生內存泄漏。
對於喜歡/不喜歡的功能,可以使用事件委托:
$('#updatepost').on('click, '.likepost', function(){
//you like code
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.