首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用ThickBox的Jquery Ajax响应

使用ThickBox的Jquery Ajax响应
EN

Stack Overflow用户
提问于 2009-09-15 22:46:39
回答 4查看 3.3K关注 0票数 1

因此,我有一个对服务的ajax调用(使用JQuery),它返回有效的html:

代码语言:javascript
复制
<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。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-09-16 11:29:40

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

我也遇到过完全相同的问题,当我复制包含链接的现有dom元素时,所有绑定的事件都在这些新创建的元素上停止工作。我所要做的就是将事件绑定到这些元素上。

因此,只需对这个新元素执行thickbox调用。不要只使用与$(document).ready相同的代码。当我这样做时,事件开始处理新元素,但在旧元素上触发两次。

对评论的回应:我不知道thickbox是如何工作的。我一直更喜欢Slimbox。我确实找到了一些对你有帮助的例子。REad this(关于厚盒子):http://15daysofjquery.com/jquery-lightbox/19/

基本上,当页面正在加载时,这个函数会触发:

代码语言:javascript
复制
function TB_init(){

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

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

    TB_show(t,this.href);

    this.blur();

    return false;

    });

现在所有的标签都会在厚框窗口中打开链接指向的东西。如果页面中添加了新的a元素,则它们没有绑定此事件,因此在使用ajax魔术并从某个地方提取新内容之后,您需要将$(“a.thickbox”).click(.click(){绑定到新的链接。所以只需添加如下内容

代码语言:javascript
复制
$(newlinkselector).click(function{ etc.. etc.. 

在脚本中,就在呈现ajax调用返回给您的内容的位置之后。

票数 0
EN

Stack Overflow用户

发布于 2011-02-15 14:12:58

您还可以将以下脚本放入ajax响应中:

代码语言:javascript
复制
<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

每次出现ajax响应时,它都会初始化厚框。

票数 1
EN

Stack Overflow用户

发布于 2009-10-09 01:34:31

我也有同样的问题。快速答案-在填充innerHTML之后添加以下行: tb_init('a.thickbox');//再次初始化

这将重新初始化锚点标记的事件处理程序。对我来说就像一个护身符。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1430027

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档