Question

I have various sections within a page of content that dynamically get replaced based on what the user selects via a click event. I’m using a tooltip plugin on the clickable items as well. Depending what is clicked will then dynamically replace other clickable items.

I’ve solved the initializing of click event through .delegate() but am not sure how to initialize the .tooltip() plugin for the dynamic content.

Code looks like this:

$(document).ready(function(){

    // This works...
    $("#content").delegate(".etype", "click", function () {
        var elem = $(this);
        var parent_id = $(this).attr('rel').replace("id_", "");
        $.ajax({
            url: '/panel/' + parent_id,
            success: function(data) {
                var obj = $.parseJSON(data);
                for (var key in obj) {
                    $('#'+obj[key]['panel']+'panelwrapper .panelcontainer').html(obj[key]['content']);
                    $('.'+obj[key]['etype']+'_type.etype').removeClass('selected');
                    elem.addClass('selected');
                }
            }
        });     
    });

    // This doesn't work for new AJAX content.
    // Not sure if .delegate() can be used here...
    $(".etype.showtip").tooltip({
        effect: 'fade', 
        position: 'center right',
        opacity: 0.7,
        offset: [3, 0],
    });
});

Answer 1

Found the solution here…

tooltip for Ajax-loaded triggers – jQuery live?

$(document).delegate("[title]", "mouseenter", function() {
    if (!$(this).data("tooltip")) {
        $(this).tooltip({position: "top center", offset: [-7, 10]});
        $(this).trigger("mouseenter");
    }   
});