当数据来自服务器端时，ThickBox 不工作

Question

我正在使用 jQuery 厚框在模式对话框中显示 aspx 页面 这在我的页面中运行良好。在我的页面中，我有一些链接，当我单击这些链接时，使用 jQuery 的 Load 方法，我从服务器页面获取一些数据并将其加载到其中。（我获取的数据是一个网格，其中包含一些图像）。我的问题是，当我的厚盒在我的页面中进行硬编码时，它工作正常，但是当我从服务器获取它并加载到 div 时，它不起作用，而是在模式对话框中显示新页面，它重定向浏览器以加载该页面。

我在第一页中硬编码了这一行

<a class='thickbox' href='../Home/CostMetrics.aspx?Model=6&KeepThis=true&TB_iframe=true&height=300&width=850'>modal thick box link</a>

时，我从服务器生成此标记。

，当我将数据从服务器加载到 div 模态厚框链接

两者都是相同的。但是我的灯箱无法工作。有什么想法可以解决这个问题吗？

我在我的第一页中包含了厚盒 CSS 和 js。填充 div 的服务器页面返回这样的数据

<div><div><img src='abc.jpg' /> <a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">modal thick box link</a></div></div>

提前致谢

Answer 1

我遇到了类似的问题 - 厚盒在页面中加载的数据上工作正常 - 但是当您返回动态内容（使用 jQuery Ajax 命令）“页面加载后”时 - 新数据中包含的链接将打不开厚盒...

我的解决方案：
Thickbox 在 Thickbox.js 文件中调用“tb_init”函数 - 该函数仅在页面加载时执行一次...您需要再次调用“tb_init”函数INSIDE执行新动态服务器内容的 jQuery 函数！

通过以下三行调用“tb_init”（您可以在“thickbox.js”文件的顶部找到这些行）：

tb_init('a.thickbox, area.thickbox, input.thickbox, button.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

作为示例 - 这是我如何让 Thickbox 处理使用 jQuery 动态生成的内容的代码片段Ajax 命令（我认为它类似于您使用的 jQuery 的“加载”方法！？）...

$.ajax({
method: 'get',url: '<?php echo $url;?>incl_ajax_prices.php',data: 'h=<?php echo $Hid;?>',
beforeSend: function(){$('#PriceLoad').show('fast');}, //show loading just when link is clicked
complete: function(){ $('#PriceLoad').hide('fast');}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$('#Prices').show('slow'); //animation
$('#Prices').html(html); //show the html inside .content div

// ThickBox - this allows any dynamically created links that use thickbox to work!
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

}
}); //close ajax

这就是我的做法（我是 jQuery 新手），它可能不是最好的解决方案，但试用＆amp; 错误引导我使用这个方法！

希望有帮助吗？

Answer 2

与 Sergey 所说的不同的是，在 .js 中的某个位置使用 jQuery 的 .live() 函数：

$('[id^="my_thick_"]').live("click", function(event) {
    try {
            // This block is taken from tb_init()
        var t = this.title || this.name || null;
        var a = this.href || this.alt;
        var g = this.rel || false;
        tb_show(t,a,g);
        this.blur();
        return false;
    } catch(e) { alert(e); }    
});

假设动态添加的链接的 ID 以“my_thick_...”开头

Answer 3

据我记得，ThickBox 是在 DOM 准备就绪时初始化的（在 jQuery 的就绪事件上）。 在此初始化过程中，它会将默认的单击处理程序替换为显示模态的处理程序。 当您使用 jQuery 的 Load 方法加载数据时，没有这样的初始化。 为了解决这个问题，您应该在将新 html 插入到这个新 html 的页面中后手动初始化 ThickBox。 或者你也可以在所有元素上重新初始化 ThickBox（在将新的 html 插入 dom 后），这可以工作，但这不是最佳解决方案：

tb_init('selector for newly added anchor (a tag)'); // only for new one
tb_init('a.thickbox'); // to reinit thickbox on all anchors with class thickbox

Answer 4

您可以将 Thickbox.js 中的原始 tb_init 函数代码替换为以下代码：

function tb_init(){
    $(document).click(function(e){
    e = e || window.event;
    var el = e.target || e.scrElement || null;
    if(el && el.parentNode && !el.className || !/thickbox/.test(el.className))
    el = el.parentNode;
    if(!el || !el.className || !/thickbox/.test(el.className))
    return;
    var t = el.title || el.name || null;
    var a = el.href || el.alt;
    var g = el.rel || false;
    tb_show(t,a,g);
    el.blur();
    return false;
    });
};

或者您可以将此函数作为普通 JS 函数放置在 html 页面的头部标记内。 它将使其能够很好地处理外部数据加载。