javascript - 设置页面上现有的工具提示和稍后加载的工具提示

Question

我有以下 CoffeeScript：

$ ->
  $("[rel='tooltip']").tooltip
    html: false
    delay: { show: 500, hide: 100 }
    placement: 'bottom'

这会在页面加载时设置Twitter Bootstrap 工具提示。我的问题是我将 AJAX 链接加载到选项卡中，并且我需要在该 AJAX 加载的内容中设置工具提示。我认为解决方案是使用on，但我无法弄清楚要调用它的元素以及要使用的事件。我试过：

$(document).on 'ready', "[rel='tooltip']", ->
  console.log 'setting up tooltips'

但是控制台消息从未出现，所以这似乎不起作用。

我想要一段代码来设置加载时页面上的任何工具提示，以及将来出现的任何工具提示。

编辑： charlietfl 的回答做到了！在我的$ ->回调之外，我放置了：

$(document).tooltip
  selector: "[rel='tooltip']"
  html: false
  delay: { show: 500, hide: 100 }
  placement: 'bottom'

现在我已经在页面中的工具提示设置好了，并且出现在 AJAX 加载的选项卡中的新工具提示也设置好了。

score 2 · Accepted Answer

Bootstrap 已经内置了委派方法。使用该selector选项来委派代码运行时不存在的未来元素：

$(document).tooltip({
     selector: "[rel='tooltip']"
      /* other options*/
})

score 0 · Accepted Answer

您可以设置一个全局 ajax 事件处理程序，例如ajaxSuccess()：

$(document).ajaxSuccess(function() {
    $("[rel='tooltip']").tooltip({ //... etc

这将在每次新的 ajax 调用成功时运行回调并附加工具提示。

2 回答 2