jQuery Tools Overlay not showing on second click

Question

Here is what i'm trying to do - i'm writing generic overlay function which will serve for all links with specific class. It's very simple though, you have a link like this:

<a class="modalInput" rel="#prompt">Local load</a>

and when you click it, javascript kicks in:

        $(".modalInput").live("click",function()
    {
        var obj = null;
        obj = $(this);
        var container = null;
        if (!(typeof obj.attr("container") === 'undefined'))
        {
            container = obj.attr("container");
        }
        else
        {               
            if (typeof obj.attr("container") === 'undefined')
            {
                container = obj.attr("rel");

                if (container == '#norel')
                {
                    container = randomString();
                    $("#footer").append("<div id='"+container+"' class='gru_curtain_simple_overlay'></div>");                   
                    obj.attr("container", container);
                }
                else
                {
                    container = container.substring(1, container.length);
                }
            }
        }

        test_test(container, obj);
    });

This function get's various parameters of that link and decides what it should do. Then, test_test() is called which looks like this:

    function test_test(container, obj)
{
    var triggers = jQuery("#"+container).overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: false,
        closeOnEsc: true,
        load: true,
        oneInstance: false,

        onBeforeLoad: function() {
            if ($.trim($("#"+container).html()).length < 25)
            {
                //Check if it's remote
                var remote = obj.attr("remote");                    
                if (!(typeof remote === 'undefined'))
                {
                    //$(container).load(remote);
                    $.get(remote, function(data)
                    {
                        $("#"+container).empty().append(data);
                    });
                }
            }

            //Check if dialog should have close button
            var is_closable = obj.attr("closable");
            if (is_closable)
            {
                $("a.close").hide();
            }

            var wd = parseInt(obj.attr("wd"));
            var hg = parseInt(obj.attr("hg"));

            if (!(typeof wd === 'undefined'))
            {
                $("#"+container).css("width", wd);
            }
            if (!(typeof hg === 'undefined'))
            {
                $("#"+container).animate({
                    height: hg
                }, 800, function()
                {
                    $("#"+container).css("overflow-x", "hidden");
                    $("#"+container).css("overflow-y", "visible");

                });
                //$(container).css("height", hg);
            }
        },

        onLoad: function() {            
        },

        onClose: function() {
            //Destroy current container
            //var container = obj.attr("rel");
            //$(container).empty().html('<img src="/wp-content/themes/default/images/preloader.gif" style="margin: 25% 25%; width: 120px;"/>');
        }
    });

I know, it's huge but it works very well. So what is the problem? If I click on the link it shows an overlay for the first time. But when I click it again, it does not work. It gives no errors, no warnings of any kind, basically it should work but it does not.

I have tried everything that crossed my mind (like reducing test_test() function to it's basics) but that didn't do the trick. So I'm running out of ideas and if anyone has a suggestion, I'm willing to listen.

EDIT: I found out that if I have another link like this:

<a class="modalInput" rel="#norel" remote="/test?t=694749&inner=1" wd="850" hg="500">Remote load</a>

I can click on this link as much as I want (this one creates random div which is appended in footer) but after on the link above (which has container somewhere in HTML so it does not generate anything), all overlays are not showing anymore.

Answer 1

like andrew whitaker said, the solution is shown in jQuery Tools alert works once (but only once)

wrapped up: remove the "load: true" from overlay params, call .load() manually.

working multiple times:

//call the overlay
$('#idofoverlay').overlay({
//  load: true
}).load();

working only once:

//call the overlay
$('#idofoverlay').overlay({
  load: true
});

drawbacks:

• in conjunction with jquery-tools overlay you loose the "close" item when called that way