jQuery Tools Overlay 在第二次点击时不显示答案

【问题标题】：jQuery Tools Overlay not showing on second clickjQuery Tools Overlay 在第二次点击时不显示
【发布时间】：2011-11-21 13:40:23
【问题描述】：

这就是我想要做的——我正在编写通用覆盖函数，它将为具有特定类的所有链接服务。这很简单，你有一个这样的链接：

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

当你点击它时，javascript 会启动：

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

此函数获取该链接的各种参数并决定它应该做什么。然后，调用 test_test()，如下所示：

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

我知道，它很大，但效果很好。那么问题是什么？如果我单击该链接，它会首次显示叠加层。但是当我再次单击它时，它不起作用。它没有给出任何错误，没有任何警告，基本上它应该可以工作，但它没有。

我已经尝试了所有我想到的东西（比如将 test_test() 函数简化为它的基础），但这并没有成功。所以我的想法已经不多了，如果有人有建议，我愿意倾听。

编辑：我发现如果我有另一个这样的链接：

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

我可以随心所欲地点击这个链接（这个会创建随机的 div 并附加在页脚中）但是在上面的链接之后（它在 HTML 中的某处有容器，所以它不会生成任何东西），所有的覆盖都是不再显示了。

【问题讨论】：

您是否尝试过像这样杀死点击处理程序：$(".modalInput").die("click").live("click",function() ...
jQuery Tools alert works once (but only once) 的可能重复项
@Andrew Whitaker 是的，问题是一样的，但该解决方案对我不起作用，因为我的容器并不总是相同的。我可以有无限数量的随机生成的容器应该覆盖，这就是我传递“容器”参数的原因。
@madc 感谢您的建议，但这并没有解决我的问题:(
我没有修复它，但我知道是什么造成了麻烦！问题是由加载到 DIV 中的内容引起的。如果我等待内容完全加载，则每次单击链接时覆盖都会起作用。所以基本上，问题在于将包含大量 JS 的页面加载到 DIV 中，这不知何故会弄乱其他代码。所以，如果你想做我所做的，我建议使用 iFrame 作为容器或 Fancybox 作为覆盖组件。

标签： javascript jquery overlay modal-dialog jquery-tools

【解决方案1】：

就像安德鲁·惠特克所说，解决方案显示在 jQuery Tools alert works once (but only once)

总结：从覆盖参数中删除“load: true”，手动调用 .load()。

多次工作：

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

只工作一次：

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

缺点：

结合 jquery-tools 覆盖您可以松开“关闭”项以这种方式调用时

【讨论】：