Question

我的具体用例是我使用.net回发来显示包含与之关联的工具提示的元素的更新面板。我已经在页面上初始化了ZURB Foundation（提供工具提示）脚本，并且第一页工具提示工作得很好。在回发之后，我想*重新初始化脚本，以便这些新的工具提示项目绑定到'hover'事件。

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

在我看来，'hover'绑定是在页面init上完成的'.has-tip'元素的现有集合，但是处理 future .has-tip元素存在。

我想做以下事情： a）重新初始化工具提示插件并搜索新的.has-tip元素以将'hover'事件附加到。

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

$.fn.tooltips('init');

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

Answer 1

编辑/澄清：

似乎动态内容存在错误： https://github.com/zurb/foundation/pull/465
~~修复错误后（您可以自己修复它，阅读pull req。了解更多信息），~~修复了错误，所以你可以使用以下命令触发页面范围的工具提示刷新：

（文档）$ .tooltips（ '刷新'）;

原始答案

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

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

它实际上只是他们其他方法的链条，但它最好在。之前.desit以避免双重工具提示或其他一些碰撞。

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

适用于ZF v5.2 +

使用ZURB Foundation进行工具提示 - 新创建的DOM元素未绑定到工具提示“悬停”事件

3 个答案: