将 ZURB 基础用于工具提示 -- 新创建的 DOM 元素未绑定到工具提示'hover'事件

Question

我的具体用例是，我正在使用 .net 回发来显示具有关联工具提示的元素的更新面板。 我已经在页面上初始化了 ZURB 基金会（提供工具提示）脚本，并且首页工具提示效果很好。 回发后，我想*重新*初始化脚本，以便将这些新工具提示项绑定到"悬停"事件。

通用用例是指以任何方式添加新的启用工具提示的元素的任何情况。

在我看来，"悬停"绑定是在 init 页面上完成的，到现有的".has-tip"元素集合，但需要处理未来的 .has-tip 元素。

我想做以下几点：a） 重新初始化工具提示插件并搜索新的 .has-tip 元素以将"悬停"事件附加到其中。

尝试了许多不同的方法来尝试重新初始化，但是

$.fn.tooltips('init');

似乎是最有希望的，因为它成功地调用了脚本中的 init 方法，但没有将悬停事件绑定到新的 .has-tip 元素。

Answer 1

编辑/澄清：

1. 动态内容似乎存在错误：https://github.com/zurb/foundation/pull/465

2. 修复错误时（您可以自己修复它，阅读拉取要求以获取更多信息），该错误已修复，因此您可以通过以下方式触发页面范围的工具提示刷新：

   $（document）.tooltips（'reload'）;

---

原答案

如果你还没有弄清楚，jquery.tooltips.js 有一个名为 .reload 的方法/函数，它实际上是最有前途的（代码来自基础插件）：

reload : function() {
      var $self = $(this);
      return ($self.data('tooltips')) ? $self.tooltips('destroy').tooltips('init') : $self.tooltips('init');
    },

它实际上只是他们其他方法的链条，但最好在 .init 之前 .destroy 以避免双重工具提示或其他冲突。

Answer 2

我尝试了很多建议，但真正有效的是：

完成 DOM 编辑后，您必须调用

$(document).foundation();

这句话将刷新所有内容，包括您的工具提示。就像一个魅力。

Answer 3

当使用 Ajax 生成模态窗口时，我遇到了同样的问题，

这是我对此的解决方法：

$(document)
  .on('opened.fndtn.reveal', '[data-reveal]', function () {
    $('html').css({'overflow': 'hidden'});
    $('.has-tip').each(function(i){
    var tip = $(this);
    Foundation.libs.tooltip.create(tip);
  });
})

它适用于采埃孚 v5.2+