在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 (将#修改为@）