jquery惰性加载和其他jquery/javascript函数;追加后无法工作
jquery lazy load and other Jquery / javascript functions don't work after append
我正在尝试创建一个页面,用户可以在其中查看图片并喜欢或不喜欢它们。为了方便用户,我创建了一个函数,当用户单击"加载更多帖子"时,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>
使用惰性加载程序,它支持自动初始化/自初始化。
否则,您需要在附加后调用初始化代码:
$("div#updatepost").prepend(html).find('img.lazyload').lazyload();
但如果你使用了大量的AJAX,我真的建议你使用上面链接的lazySizes脚本。普通的jQueryLazylod会在AJAX密集的网站上产生内存泄漏。
对于您喜欢/不喜欢的功能,您可以使用事件委派:
$('#updatepost').on('click, '.likepost', function(){
//you like code
});
相关文章:
- 正在从JQuery追加Laravel Blade
- JQuery追加到父级,只要它's已创建
- Chrome DOM 未针对 jQuery 追加/淡入进行更新
- 这两种使用 jQuery 追加 DOM 元素的方法有什么不同
- jquery 1.7追加后点击事件不起作用
- jQuery追加双引号;不能正常工作
- JQuery追加异常行为
- Jquery追加故障
- jQuery - 追加/替换事件侦听器(当事件处理程序未知时)
- jQuery追加行和列
- jQuery追加x元素的列表
- jquery追加元素位置始终为0
- 用jquery追加javascript和css
- jQuery追加函数在IE8中不起作用
- 无法与使用 jquery 追加添加的 dom 对象进行交互
- JQuery:追加在元素之前
- jQuery 追加函数中的 Javascript if 语句
- jQuery - 追加嵌入流
- 使用特定类名 JQuery 追加跨度
- Jquery 追加 html set id 到变量