Jak powiązać etykiety narzędzi Twitter Bootstrap z dynamicznie tworzonymi elementami?

Używam podpowiedzi bootstrap Twittera z javascript, takich jak:

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

Mój znacznik wygląda następująco:

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

Działa to dobrze, ale dodaję <a>elementy dynamicznie, a podpowiedzi nie są wyświetlane dla tych dynamicznych elementów. Wiem, że to dlatego, że wiążę .tooltip () tylko raz, gdy dokument jest załadowany z typową $(document).ready(function()funkcją jquery .

Jak mogę to powiązać z dynamicznie tworzonymi elementami? Zwykle robiłbym to za pomocą metody live () jquery. Jakiego zdarzenia używam do wiązania? Po prostu nie jestem pewien, jak podłączyć bootstrap .tooltip () za pomocą jquery .live ().

Znalazłem jeden ze sposobów, aby ta praca działała mniej więcej tak:

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

To działa, ale wydaje się trochę hackish. Dzwonię również dokładnie taką samą linię .tooltip () w wywołaniu $ (ready). Czy więc elementy, które istnieją, gdy strona ładuje się po raz pierwszy i pasują do tego selektora, kończą się dwukrotnie etykietką?

Nie widzę żadnych problemów z tym podejściem. Po prostu szukam najlepszej praktyki lub zrozumienia tego zachowania.

Spróbuj tego:

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

Jeśli masz wiele konfiguracji podpowiedzi, które chcesz zainicjować, działa to dla mnie dobrze.

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

Następnie można ustawić właściwość dla poszczególnych elementów za pomocą dataatrybutów.

Dla mnie tylko złapanie zdarzenia mouseenter było trochę błędne, a podpowiedź nie wyświetlała się / ukrywała poprawnie. Musiałem to napisać, a teraz działa idealnie:

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

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

Tutaj opublikowałem dłuższą odpowiedź: https://stackoverflow.com/a/20877657/207661

TL; DR: Potrzebujesz tylko jednego wiersza kodu, który działa w zdarzeniu gotowości do dokumentu:

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

Inne, bardziej skomplikowane kody sugerowane w innych odpowiedziach nie wydają się konieczne (przetestowałem to z Bootstrap 3.0).

Dla mnie ten js odtwarza ten sam problem, co dzieje się z Paolą

Moje rozwiązanie:

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

Zamiast przeszukiwać go w całości. Myślę, że wystarczy użyć opcji dynamicznego tytułu już dostępnej w takich scenariuszach. Myślę, że:

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

Znalazłem kombinację tych odpowiedzi, która dała mi najlepszy wynik - pozwalając mi nadal pozycjonować etykietkę i dołączać ją do odpowiedniego pojemnika:

$('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');
});

Odpowiedni HTML:

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