0

次の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'

しかし、コンソール メッセージは表示されなかったため、機能していないようです。

読み込み時にページに表示されるツールチップと、今後表示されるツールチップを設定するコードのチャンクが 1 つ必要です。

編集： charlietflの答えはそれをやった! コールバックの外に$ ->、次のものを配置しました。

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

これで、既にページにあるツールチップがセットアップされ、AJAX がロードされたタブに表示される新しいツールチップがセットアップされます。

4

2 に答える 2

2

Bootstrap には既に委任メソッドが組み込まれています。selectorオプションを使用して、コードの実行時に存在しない将来の要素を委任します。

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

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

于 2012-12-01T16:47:16.730 に答える
0

次のようなグローバル ajax イベント ハンドラーを設定できますajaxSuccess()。

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

これにより、コールバックが実行され、新しい ajax 呼び出しが成功するたびにツールチップが添付されます。

于 2012-12-01T16:44:26.673 に答える