当数据来自服务器端时，ThickBox 不起作用答案

【问题标题】：ThickBox not working when data is from server side当数据来自服务器端时，ThickBox 不起作用
【发布时间】：2010-10-31 20:55:00
【问题描述】：

我正在使用 jQuery 粗框在模式对话框中显示 aspx 页面这在我的页面中运行良好。在我的页面中，我有一些链接，当我点击时，使用 jQuery 的加载方法，我从服务器页面获取一些数据并加载到其中。（我获取的数据是一个网格，其中包含一些图像）。我的问题是我的厚框在我的页面中硬编码时工作正常，但是当我从服务器获取它并加载到 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>

提前致谢

【问题讨论】：

javascript 控制台中是否显示或显示任何错误消息（取决于您使用的浏览器）？
没有消息。我检查了视图源。新注入的 HTML DOM 不存在

标签： jquery thickbox

【解决方案1】：

我遇到了类似的问题——thickbox 在页面中加载的数据上工作正常——但是当你返回动态内容（使用 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;

作为一个例子 - 这是一个代码 sn-p 我如何让厚盒处理我使用 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 新手），它可能不是最好的解决方案，但反复试验导致我采用了这种方法！

希望有帮助吗？

【讨论】：

【解决方案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_...”开头

【讨论】：

【解决方案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

【讨论】：

【解决方案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 页面的头部标签内。它可以很好地处理外部数据加载。

【讨论】：