[英]jquery not working for items displayed by jScroll (infinite scroll)
I'm using jScroll ( jscroll.com ) in my Laravel 5.1 application for infinite scrolling. 我在Laravel 5.1应用程序中使用jScroll( jscroll.com )进行无限滚动。 I'm further using some jquery which I want to be triggered on clicking the 'Like' button for each post. 我进一步使用了一些jquery,我希望在单击每个帖子的“赞”按钮时将其触发。 Jquery is working perfectly on the first page's posts ie localhost/myproject/index
but it is not triggered for the posts which are appended by jScroll from the next page(s) ie localhost/myproject/index?page=2
etc. jQuery在第一页的帖子(即localhost/myproject/index
但是对于下一页(即localhost/myproject/index?page=2
等)由jScroll追加的帖子,不会触发jQuery。
Here is my code for displaying the posts: 这是我显示帖子的代码:
@foreach($posts as $post)
<div class="panel panel-default">
<div class="panel-body post">
<h3>{{ $post->title }}</h3>
<hr>
<p>{{ $post->discripion }}</p>
</div>
<div class="panel-footer">
<div class="btn-group">
<button type="button" data-id="{{$post->id}}" class="btn btn-default like-btn">Like</button>
</div>
</div>
</div>
@endforeach
and the simple jquery that I want to be triggered for each posts is: 我想为每个帖子触发的简单jQuery是:
<script type="text/javascript">
$('button.like-btn').on('click',function(){
var post_id = $(this).data('id');
alert('Liked post with id = ' + post_id);
});
</script>
It's because jquery doesn't bind to those elements (they are not in the DOM initially). 这是因为jquery不会绑定到那些元素(它们最初不在DOM中)。 Bind it to document instead, like this: 而是将其绑定到文档,如下所示:
$(document).on("click", 'button.like-btn', function(event) {
alert("new link clicked!");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.