Question

我在bootstrap popover行中显示内容，在我滚动到第二个或第三个页面引导程序popover不工作之后，

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

请帮我解决这个问题

Answer 1

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

问题

ScrollPager正如我想的那样通过XHR（AJAX）加载数据。这意味着在收到新记录后，它们会附加到您当前的HTML代码中。弹出窗口默认附加到具有属性data-toggle="popover"的所有元素。在首次加载页面之后会发生这种情况。

因为您的新记录稍后加载，所以popover-handler不会附加到它们。

解决方案

您需要手动附加popover-handler。这可以通过几种不同的方式完成：

抓住您的扩展程序的javascript事件（如果有的话）

或在请求完成时捕获全局ajax事件

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

JS-代码

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

$(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() - 调用。

希望它有所帮助！

滚动后，Bootstrap popover无法正常工作

1 个答案:

问题

解决方案

JS-代码