jquery - 当数据来自服务器端时，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”函数在执行新动态服务器内容的 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 的“加载”方法!？)动态生成的内容，让厚盒工作...

$.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 新手)，它可能不是最好的解决方案，但反复试验让我找到了这个方法!

希望有帮助吗？