Jquery Ajax响应使用ThickBox

StackOverflow https://stackoverflow.com/questions/1430027

  •  07-07-2019
  •  | 
  •  

题

所以我对服务（使用JQuery）进行了ajax调用，返回有效的html：

<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 <！>”时;标签打开一个新页面而不是<！> quot; ThickBox <！> quot;使用iFrame内容。

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

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

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

有帮助吗？

解决方案

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

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

所以你也可以调用这个新元素。不要只使用在$（document）.ready中使用的相同代码。当我做了类似的事情时，事件开始处理新元素，但是在旧元素上开了两次。

编辑以回应评论： 我不知道厚箱是如何工作的。我一直更喜欢Slimbox。我找到了一些可以帮助你的例子。 READ this（关于thickbox）： 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窗口中打开stuff链接点。如果新的元素被添加到页面中，它们没有绑定到它们的事件，所以在执行了ajax魔术并将新内容拉出某个地方之后，你需要绑定那个$（<！> quot; a.thickbox <！> quot;）。点击（function（）{到新链接。所以只需添加类似

的内容 
$(newlinkselector).click(function{ etc.. etc..

在脚本中，就在你渲染ajax调用给你的东西的地方之后。

其他提示

您还可以在ajax响应中添加以下脚本：

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

每当ajax响应出现时，它将初始化厚盒子。

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

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

将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方法实时绑定，该方法会考虑动态生成的内容。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top