CODEWITHSUNDEEP
jquery
Das123
Das123

Reputation: 865

jQuery initialize dynamically loaded content

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],
    });
});

Upvotes: 1

Views: 2147

Answers (2)

Das123
Das123

Reputation: 865

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");
    }   
});

Upvotes: 1

Rupesh Pawar
Rupesh Pawar

Reputation: 1917

Check with live event

$(".etype.showtip").live("tooltip", function(){
    effect: 'fade', 
    position: 'center right',
    opacity: 0.7,
    offset: [3, 0],
});

Edit.

Ohh i am sorry for recomending live mothod.

As far as I see the problem is that the tooltip function is called just once (on window.load).

Try to call that method on load event as well as ajax success function.

Upvotes: 0

Related Questions