0

我在引导弹出窗口行中显示内容，在我滚动到第二页或第三页引导弹出窗口不起作用后，

<?php echo ListView::widget([
                     'dataProvider' => $dataProvider,
                     'itemOptions' => ['style'=>'float:left;','class' => 'item'],
                     'itemView' => '_item',
                     'pager' => [
                        'class' => \kop\y2sp\ScrollPager::className(),
                        'triggerOffset' => 100,
                        'noneLeftText' => 'You reached the end',                        
                        'noneLeftTemplate' => '<div class="ias-noneleft" style="text-align: center;clear:both;">{text}</div>',
                     ],
                     'summary' =>false,
                ]); ?>


<a  data-toggle="popover" data-placement='right' 
                          data-content='<div>Welcome to the yii2 scroll pager</div>' 
                          class="rec_popover"
                          href="<?=Url::toRoute(['list/view','rid' => $list['id']]);?>" data-lightbox-group="3D">
                          <img src="images/list-1.png"  border="0" style="width:190px;height:107px;" />
</a>

请帮我解决这个问题

4

1 回答 1

0

我不知道您正在使用的扩展程序（ScrollPager），但我确定问题出在哪里。这是交易：

问题

正如我所料，ScrollPager 通过 XHR (AJAX) 加载数据。这意味着在收到新记录后，它们会附加到您当前的 HTML 代码中。data-toggle="popover"默认情况下，弹出框会附加到所有具有该属性的元素。这发生在您的页面初始加载之后。

因为您的新记录是在稍后的时间点加载的，所以弹出框处理程序不会附加到它们。

解决方案

您需要手动附加弹出处理程序。这可以通过几种不同的方式完成：

  • 捕获扩展程序的 javascript 事件（如果有）
  • 或在请求完成时捕获全局 ajax 事件

后者具有独立工作扩展的优点。

JS代码

每当 AJAX 调用返回并将弹出窗口重新附加到所有相关目标时，都会执行以下 js 代码。这应该可以一劳永逸地解决您的问题。

$(document).ajaxComplete(function() {
    //selector to fetch all popover-targets
    var popoverTargets = $('[data-toggle="popover"]');
    //iterate over them
    popoverTargets.each(function (i, el) {
        //remove popover if already attached
        $(this).popover('destroy');
        //re-attach popover
        $(this).popover();
    });
});

请注意，这使用弹出框默认设置。如果你想自定义它，只需提供一个对象作为参数给popover()-call。

希望能帮助到你！

于 2016-02-09T09:15:45.350 回答