Question

I’m loading part of my webpage using AJAX, in particular jQuery.load(). With this the usual jQuery pattern

$('.classname').click(...) // Handler
// or, working with bootstrap
$("a[rel=tooltip]").tooltip() // Function

or similar obviously don’t work any more, because they are called only when the page is loaded. I realize there is jQuery.on for the first example, but how would I implement the second?

Is there a simple (builtin) way to also apply these to jQuery.loaded stuff, or do I have to work around it myself? Seems like a problem a lot of people should be having.

Answer 1

You have to work around it yourself; but you can easily to this by calling $("a[rel=tooltip]").tooltip() in the callback for load():

 $('#blah').load('/somewhere.html', function () {
     $('#blah').find('a[rel="tooltip"]').tooltip();
 });

Be sure to restrict the tooltip() call to only newly loaded elements, or you’ll end up initializing tooltip multiple times per element (which may result in weird behaviour).

---

To avoid duplicating code you just need to define a helper function;

function initTooltip(root) {
    return $(root || document).find('a[rel="tooltip"]').tooltip();
}

Which allows you to init tooltip. The parameter is optional, and lets you restrict initialization to only descendants of the provided element, e.g.:

jQuery(document).ready(function ($) {
    initTooltip(); // equivilant to initTooltip(document);

    $('#blah').load('/somewhere.html', function () {
        initTooltip('#blah');
    });
});