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

时，我从服务器生成此tage

＆lt; a class =“thickbox”href =“../ Home / CostMetrics.aspx？Model = 5＆amp; KeepThis = true＆amp; TB_iframe = true＆amp; height = 300＆amp; width = 850”＆gt;模态粗框链接＆lt; / A＆GT;

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

我在第一页中包含了thickbox 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

我遇到了类似的问题 - thickbox在页面加载的数据上运行正常 - 但是当你返回动态内容时（使用jQuery Ajax命令）'页面加载后' - 包含在其中的链接新数据无法打开thickbox ...

我的解决方案：
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;

作为一个例子 - 这是一个代码片段，说明我如何使用jQuery Ajax命令（我认为类似于jQuery的'Load'方法，使用jQuery Ajax命令生成内容的厚箱工作！？）... < / p>

$.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的新手），它可能不是最好的解决方案，但是试用版和错误引导我这种方法！

希望有帮助吗？

Answer 2

谢尔盖所说的一个变体就是在.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

据我所知，当DOM准备好时（在jQuery的准备事件中），ThickBox被初始化。在此初始化期间，它将使用一个显示模态的默认点击处理程序替换它。当您使用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问题有关详细信息，请参阅this link

Answer 5

您可以将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;
    });
};

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

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

5 个答案: