Bootstrap popover не работает после прокрутки

Question

Я показываю содержимое в строке попсового загрузчика, после того как я прокрутил до второй или третьей страницы всплывающее окно загрузчика не работает,

<?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 не привязывается к ним.

Решение

Вам нужно прикрепить popover-обработчик вручную. Это можно сделать несколькими различными способами:

• Поймать событие javascript вашего расширения (если оно есть)
• или перехватить глобальное ajax-событие после завершения запроса

Последнее имеет преимущество в том, что работает расширение самостоятельно.

JS-код

Следующий js-код будет выполняться всякий раз, когда возвращается AJAX-вызов, и подключать всплывающее окно ко всем соответствующим целям. Это должно решить вашу проблему раз и навсегда.

$(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. Если вы хотите настроить это, просто предоставьте объект в качестве параметра для popover()-вызов.

Надеюсь, поможет!