Python Bootstrap 4 Popover不适用于django Infinite Scroll

我正在django网站上使用来显示一些数据

我用它来显示产品清单

我们django迭代它的分页引导程序popover不起作用

页面大小：3

总记录：12

前3张唱片的流行音乐效果不错，但下一张唱片就不行了

模板：

<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>

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

---

您在页面末尾有一个航路点JS，可能还有一个popover JS加载。popover将初始化渲染的对象。要对新对象执行相同的操作，请将popover代码添加到航路点JS，然后甚至可以从加载中删除单独的popover 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()
      }
    });
});

---

您在页面末尾有一个航路点JS，可能还有一个popover JS加载。popover将初始化渲染的对象。要对新对象执行相同的操作，请将popover代码添加到航路点JS，然后甚至可以从加载中删除单独的popover 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()
      }
    });
});