使用ThickBox的Jquery Ajax响应答案

【问题标题】：Jquery Ajax response Using ThickBox使用ThickBox的Jquery Ajax响应
【发布时间】：2009-09-15 22:46:38
【问题描述】：

所以我有一个对返回有效 html 的服务（使用 JQuery）的 ajax 调用：

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

此返回 html 被正确分配并显示在页面上，但是当我单击“a”标签时，会打开一个新页面而不是带有 iFrame 内容的“ThickBox”。

如果我将此代码复制到页面中然后在浏览器中运行它会以正确的方式运行（显示厚框项目），这是令人困惑的部分

为什么 AJAX 响应不能正确显示 ThickBox 项？

我的猜测是响应文本中的 class='thickbox' 没有找到知道如何解析该项目的 javascript。

【问题讨论】：

标签： jquery ajax thickbox

【解决方案1】：

您也可以将以下脚本放入 ajax 响应中：

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

每次出现ajax响应时都会初始化粗框。

【讨论】：

【解决方案2】：

我认为问题在于，这个 <a class='thickbox' 只是没有绑定事件。

当我复制包含链接的现有 dom 元素并且所有绑定事件停止对这些新创建的元素起作用时，我遇到了完全相同的问题。我所要做的就是将事件也绑定到这些元素。

所以也只需对这个新元素进行厚盒调用即可。不要只使用与 $(document).ready 相同的代码。当我这样做时，事件开始处理新元素，但在旧元素上触发了两次。

根据评论进行编辑：我不知道厚盒是如何工作的。我一直更喜欢 Slimbox。我确实找到了一些可以帮助你的例子。阅读本文（关于厚盒）：http://15daysofjquery.com/jquery-lightbox/19/

基本上，当页面被加载时，这个函数会触发：

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

现在所有带有thickbox 类的标签都会在thickbox 窗口中打开链接指向的东西。如果将新的 a 元素添加到页面，它们没有绑定此事件，因此在执行 ajax 魔术并将新内容拉出某处之后，您需要绑定 $("a.thickbox").click (function(){ 到新链接。所以只需添加类似

的内容

$(newlinkselector).click(function{ etc.. etc..

在脚本中，就在您渲染 ajax 调用返回给您的内容之后。

【讨论】：

感谢您的回答，您能帮我了解一下这个答案是如何实现的吗？不知道你的意思是“所以你也只需对这个新元素进行粗盒调用。”因为厚框调用仅存在于新元素中，而没有其他地方。我应该拨打外部电话吗？如何在父页面上注册这个“class='thickbox'？谢谢

【解决方案3】：

我遇到了同样的问题。快速回答 - 在填充 innerHTML 后添加以下行： tb_init('a.thickbox'); // 再次初始化

这会重新初始化锚标记的事件处理程序。对我来说就像一个魅力......

【讨论】：

【解决方案4】：

将 tb_init() 替换为以下内容：

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    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;
    });
}

这会将 click 事件与一个考虑动态生成内容的 jQuery 方法 live 绑定。

【讨论】：