[解決済み】Twitter Bootstrapのツールチップを動的に作成された要素に結合するにはどうすればよいですか？

質問

Twitter bootstrapのtooltipsを以下のようなjavascriptで使用しています。

$('a[rel=tooltip]').tooltip();

私のマークアップは次のようなものです。

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

これは問題なく動作しますが、私は <a> 要素が動的に表示され、その動的要素にツールチップが表示されません。 これは、ドキュメントがロードされたときに一度だけ .tooltip() をバインドするためで、典型的な jquery の $(document).ready(function() という機能があります。

これを動的に生成される要素にバインドするにはどうしたらよいでしょうか。 通常は、jquery live()メソッドでこれを行うでしょう。 しかし、私はバインドするために使用するイベントは何ですか？ ブートストラップの.tooltip()とjquery .live()をどのようにフックアップすればいいのかがわかりません。

これを動作させる一つの方法として、以下のようなものがあることがわかりました。

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

これは動作しますが、ちょっとハチャメチャな感じがします。 また、$(ready)の呼び出しの中で、まったく同じ.tooltip()の行を呼び出しています。 では、ページが最初にロードされたときに存在し、そのセレクタに一致する要素は、2回ツールチップを表示することになるのでしょうか？

この方法で問題はないでしょう。 ただ、ベストプラクティスや動作の理解を求めているのです。

どのように解決するのですか？

こちらをお試しください。

$('body').tooltip({
    selector: '[rel=tooltip]'
});