Twitter Bootstrap araç ipuçlarını dinamik olarak oluşturulan öğelere nasıl bağlarım?

Aşağıdaki gibi javascript ile Twitter bootstrap araç ipuçları kullanıyorum:

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

İşaretlemem şöyle görünüyor:

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

Bu iyi çalışıyor, ancak <a>öğeleri dinamik olarak ekliyorum ve araç ipuçları bu dinamik öğeler için görünmüyor. Belge tipik jquery $(document).ready(function()işlevselliği ile yüklendiğinde .tooltip () bir kez bağlamak çünkü biliyorum .

Bunu dinamik olarak oluşturulan öğelere nasıl bağlayabilirim? Genellikle bunu jquery live () yöntemi ile yaparım. Ancak, bağlamak için kullandığım olay nedir? Ben nasıl bootstrap .tooltip () jquery .live () ile bağlamak için emin değilim.

Bu işi yapmanın bir yolunu buldum:

/* 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();
});

Bu işe yarıyor, ama biraz hileli görünüyor. Ayrıca $ (hazır) çağrısında aynı .tooltip () satırını arıyorum. Peki, sayfa ilk kez yüklediğinde ve bu seçiciyle eşleştiğinde var olan öğeler araç ipucuyla iki kez sonuçlanıyor mu?

Bu yaklaşımla ilgili herhangi bir sorun görmüyorum. Sadece en iyi uygulamayı veya davranışı anlamaya çalışıyorum.

Bunu dene:

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

Başlatmak istediğiniz birden fazla ipucu yapılandırmanız varsa, bu benim için iyi çalışıyor.

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

Ardından, dataöznitelikleri kullanarak özelliği tek tek öğeler üzerinde ayarlayabilirsiniz .

Benim için, sadece mouseenter olayını yakalamak biraz buggy oldu ve araç ipucu düzgün bir şekilde göstermiyor / gizlenmiyordu. Bunu yazmak zorunda kaldım ve şimdi mükemmel çalışıyor:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

Burada daha uzun cevap gönderdim: https://stackoverflow.com/a/20877657/207661

TL; DR: Belgeye hazır olayda çalışan yalnızca bir kod satırına ihtiyacınız vardır:

$(document.body).tooltip({ selector: "[title]" });

Diğer cevaplarda önerilen diğer daha karmaşık kodlar gerekli görünmüyor (Bootstrap 3.0 ile test ettim).

Benim için, bu js ile aynı sorunu yeniden üretir Paola

Çözümüm:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

Tam Vücutta aramak yerine. Biri sadece böyle senaryolarda zaten mevcut dinamik başlık seçeneği kullanabilirsiniz:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

Bu cevapların bir kombinasyonunun bana en iyi sonucu verdiğini gördüm - araç ipucunu hala konumlandırmamı ve ilgili kaba eklememi sağladım:

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

Alakalı HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>