StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I bind Twitter Bootstrap tooltips to dynamically created elements?
text
Body
copied!<p>I'm using Twitter bootstrap tooltips with javascript like the following:</p> <pre><code>$('a[rel=tooltip]').tooltip(); </code></pre> <p>My markup looks like this:</p> <pre><code><a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a> </code></pre> <p>This works fine, but I add <code><a></code> elements dynamically and the tooltips aren't showing up for those dynamic elements. I know it's because I only bind .tooltip() once when the document is finished loaded with the typical jquery <code>$(document).ready(function()</code> functionality.</p> <p>How can I bind this to dynamically created elements? Usually I would do this via the jquery live() method. However, what is the event that I use to bind? I'm just not sure how to hook up the bootstrap .tooltip() with jquery .live().</p> <p>I've found one way to make this work is something like this:</p> <pre><code>/* 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(); }); </code></pre> <p>This works, but seems kind of hackish. I'm also calling the exact same .tooltip() line in the $(ready) call. So, do the elements that exist when the page first loads and match that selector end up with the tooltip twice?</p> <p>I don't see any problems with this approach. I'm just looking for a best practice or understanding of the behavior.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload