如何解决在Django中实现无限滚动后,第2页元素不可点击
我使用航路点来遵循此guide来实现无限滚动。无限滚动效果很好,但由于某些原因,第2页元素不可单击,而第1页元素可单击。换句话说,页面加载并正常运行,直到我向下滚动到页面2,突然所有“ href”和其他可单击元素不再可单击。这是我的代码。
<div class="mt-5 ads_container">
<div class="container-fluid infinite-container">
{% for ad in ad_list %}
{% if forloop.counter0|divisibleby:4 %}
<div class="row infinite-item">
<div class="col-sm-12">
<div class="latest-magazine clearfix">
<div class="latest-ads-space clearfix">
{% endif %}
<div class="late-ad">
<div class="inner">
<a href={% url 'advert' ad_pk=ad.id %}>
<!-- <img data-src="{{ ad.profile_pic }}" class="img-responsive lazyloaded"-->
<!-- src="{{ ad.profile_pic }}"/>-->
<div class="pic_div" style="background-image: url({{ ad.profile_pic }}); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
</a>
<div class="p-a" style="height: 70px;">
<em>{{ ad.Ad_title|capfirst|shorten_title }}</em>
<div class="clearfix">
<em></em>
<em class="text-success">R{{ad.price}}</em><em> {% timezone "Africa/Johannesburg" %}{{ ad.date_created|timesince }}{% endtimezone %}</em>
</div>
</div>
</div>
</div>
{% if forloop.counter0|add:"1" in break_pts or forloop.counter0|add:"1" == ad_list|length %}
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% if ad_list.has_next %}
<a class="infinite-more-link" href="?page={{ ad_list.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block hide_script %}
<script type="text/javascript">
$("#footer_section").hide();
$("#push_div").remove();
</script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script type="text/javascript">
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],handler: function(direction) {
},offset: 'bottom-in-view',onBeforePageLoad: function () {
$('.spinner-border').show();
},onAfterPageLoad: function () {
$('.spinner-border').hide();
}
});
</script>
{% endblock hide_script %}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。