Bootstrap 4 Popover 不适用于 django Infinite Scroll答案

【问题标题】：Bootstrap 4 Popover not working for django Infinite ScrollBootstrap 4 Popover 不适用于 django Infinite Scroll
【发布时间】：2019-09-11 06:22:23
【问题描述】：

我正在使用bootstrap popover 在我的 django 站点中显示一些数据。

我使用infinite scroll 显示产品列表。

我们 django 迭代它的分页引导弹出窗口不起作用。

页面大小：3

总记录：12

对于 1st 3 记录 popover 有效，但对于下一个记录它不会

模板：

<div class="row infinite-container">
   {% for i in task %}
      <div class="col-lg-3 col-md-6 wow infinite-item">
          <a href="#0" data-toggle="popover" title="Popover title" data-content="data {{forloop.counter}}" class="grid_item">
          {{i.name}}
          </a>
      </div>
   {% endfor %}
   <div class="loading loader" style="display:none"></div>
        {% if page_obj.has_next %}
            <a class="infinite-more-link" style="display:none" href="?page={{ page_obj.next_page_number }}">More</a>
        {% endif %}
   </div>
</div>

JS代码：

// for infinite scroll
var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
          $('.loading').show();
     },
     onAfterPageLoad: function ($items) {
          $('.loading').hide();
     }
 });

【问题讨论】：

标签： python django twitter-bootstrap

【解决方案1】：

您有一个航点 JS，并且可能在页面末尾加载了一个弹出 JS。弹出框将初始化渲染的对象。要对新对象执行相同的操作，请将弹出框代码添加到航点 JS - 然后您甚至可以从加载中删除单独的弹出框 JS。

这是新的和改进的航点 JS 的代码

$(document).ready(function() {
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],

      offset: 'bottom-in-view',

      onBeforePageLoad: function () {
        $('.loading').show();
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
      }
    });
});

【讨论】：