Бесконечная прокрутка + подсказки + обратный вызов - PullRequest
0 голосов
/ 24 октября 2018

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

https://stage.superbiajuridico.es/news/

Подсказка находится в маленьком желтом круге, когда на нее наведен курсор.Если вы прокрутите вниз, на следующих страницах остальные подсказки не будут созданы, хотя я использую событие append для их построения при каждой перезагрузке страницы.

Видимо, код очень прост иЯ не знаю, что я делаю неправильно:

 // TOOLTIPS
// ------------------

var miTootip = $('.tooltip-item');
new Tooltip(miTootip, {
  // options
});

// INFINITE SCROLL
// ------------------

var inf = $('.infinite-scroll-container').infiniteScroll({
  // options
});

inf.on('append.infiniteScroll', function(event, response, path, items) {
    // THIS IS THE PART THAT DOESN'T WORK
    new Tooltip(miTootip, {
      // options
    });
  });

Это не работает.У меня не было большого опыта работы с JS, поэтому я думаю, что делаю что-то не так очевидное.

РЕДАКТИРОВАТЬ: Когда я пытался закодировать, я понял, что ошибка в другом месте.Всплывающая подсказка появляется только в первом элементе (она не имеет отношения к бесконечной прокрутке).Это ручка: https://codepen.io/aitormendez/pen/yRGyZW

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Должны быть созданы всплывающие подсказки, повторяющие объект jQuery с циклом.

let myTooltip = $('.tooltip-item');
    myTooltip.each(function(){
      new Tooltip(this, {
      title: "Tooltip",
      trigger: "hover",
    });
})
0 голосов
/ 25 октября 2018

Как я понимаю, ваш new Tooltip(miTootip) берет HtmlElement и заменяет подсказку.Поэтому в обратном вызове вашего append.infiniteScroll события вы должны добавить элемент с классом .tooltip-item, а затем создать всплывающую подсказку.

UPD

Вы выбрали .tooltip-item и с помощью этого элемента, используя конструктор всплывающей подсказки, создали всплывающую подсказку только для одного элемента.Итак, если вы хотите эту подсказку для всех элементов, которые нужны этой подсказке, вы должны сделать что-то вроде этого:

inf.on('append.infiniteScroll', function(event, response, path, items) 
   {
    $('.infinite-scroll-container').append('<div class="tooltip-item"></div>')
    const miTooltip = $('.tooltip-item')
    new Tooltip(miTooltip, {
       // options
    });
});
...