无限滚动+工具提示+回调答案

【问题标题】：Infinite Scroll + Tooltips + callback无限滚动+工具提示+回调
【发布时间】：2018-10-24 13:28:37
【问题描述】：

我正在尝试使用infinite scroll 实现一个页面并将tooltips 添加到某些项目中。无限滚动工作正常，但工具提示只出现在第一页上，然后用滚动添加新项目。这是一个例子：

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 没有太多经验，所以我认为我做错了一些明显的事情。

编辑：在尝试 codepen 时，我意识到错误在其他地方。工具提示仅出现在第一项中（它与无限滚动无关）。这是笔： https://codepen.io/aitormendez/pen/yRGyZW

【问题讨论】：

标签： javascript jquery callback tooltip infinite-scroll

【解决方案1】：

据我了解，您的 new Tooltip(miTootip) 采用 HtmlElement 并替换为工具提示。因此，在您的append.infiniteScroll 事件回调中，您必须添加类.tooltip-item 的元素，然后创建工具提示。

UPD

您选择了.tooltip-item 并使用此元素，使用 Tooltip 构造函数创建了工具提示，仅用于一项。所以，如果你想要这个工具提示的所有项目，这个工具提示需要，你必须这样做：

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
    });
});

【讨论】：

你的意思是向 DOM 添加元素吗？它是由无限滚动本身完成的。在提供的示例中，该类是 other ('.marca-sj')，但它已在 append 创建工具提示之前添加到 DOM。 stage.superbiajuridico.es/news
在您的 UPD 之后发表评论。每次加载下一页时，无限滚动基本功能已经附加了 div 和 class。我认为我不需要使用 append 事件再次附加它。

【解决方案2】：

工具提示必须通过循环迭代 jQuery 对象来创建。

let myTooltip = $('.tooltip-item');
    myTooltip.each(function(){
      new Tooltip(this, {
      title: "Tooltip",
      trigger: "hover",
    });
})

【讨论】：