2

我正在使用 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 时，我正在从服务器生成这个标签

<a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">模态粗框链接</a>

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

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

提前致谢

4

4 回答 4

3

I had a similar problem - thickbox works fine on data that loads in page - but when you return dynamic content (using jQuery Ajax command) 'after the page has loaded' - links contained in that new data would not open thickbox...

My Solution:
Thickbox calls the "tb_init" function inside the thickbox.js file - which is only executed once, on page load... you need to call the "tb_init" function again INSIDE your jQuery function that executes the new dynamic server content!

Call the 'tb_init' by the following three lines (you can find these lines at top of "thickbox.js" file):

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

As an example - this is a code snippet of how i got thickbox working on content i dynamically generated using the jQuery Ajax command (which i think is similar to jQuery's 'Load' method that you use!?)...

$.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

This is how I did it (im new to jQuery), its probably not the best solution, but trial & error lead me to this method!

Hope that helps?

于 2009-07-09T01:07:01.183 回答
3

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_...”开头

于 2011-01-14T00:14:42.597 回答
1

据我所知，ThickBox 是在 DOM 准备好时初始化的（在 jQuery 的 ready 事件上）。在此初始化期间，它将默认单击处理程序替换为向您显示模式的处理程序。当您使用 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
于 2009-06-06T19:46:24.113 回答
0

您可以将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 页面的头部标签内。它将使其与外部数据负载一起工作。

于 2010-07-16T09:54:15.450 回答