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

Question

我有以下 CoffeeScript：

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

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

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

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

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

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

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

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

Answer 1

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

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

参考：http://twitter.github.com/bootstrap/javascript.html#tooltips

Answer 2

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

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

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