thickbox 关于动态生成 无法跳出弹出框的问题

简介:

问题描述:

用jQuery动态生成thickbox的连接代码,发现没有效果。

 

原因:

thickbox在页面加载后,会给a,input,area等绑定弹出事件。

通过tb_init(’a.thickbox, area.thickbox, input.thickbox’);实现。

然而jQuery动态生成的代码中的a,或者其他标签就没有被绑定这个事件了。

这个时候,怎么办呢?

解决:

在动态生成,并且加载到页面中之后,重新绑定弹出事件。

复制代码
$.ajax({
                       type: "POST",
                       url: "/default/index/ajax/do/getnotice/page/"+page,
                       success: function(msg){
                            var notice = eval("("+msg+")");
                            var htmlOption = '';
                            var num = notice.length;
                            for(var i=0; i< num;i++){
                                htmlOption += '<tr height="30" align="left"><td class="table_wz" title="'+notice[i].title+'"><a href="/member/teacher/shownotice/id/'+notice[i].id+'?KeepThis=true&TB_iframe=true&TB_iniframe=true&TB_reload=true&Parent_reload=true&height=540&amp;width=950" class="thickbox" title="查看通知">'+notice[i].title+'</a></td><td class="table_wz" width="100" align="right">'+notice[i].time+'</td></tr>'; 
                            }
                            if(page<pagenum){
                                if(num==5){
                                    $(".pn").show();
                                    $(".pnp").hide();
                                }else{
                                    $(".pn").hide();
                                    $(".pnp").show();
                                }
                            }else{
                                $(".pn").hide();
                                $(".pnp").show();
                            }
                            $('.shownotice').html(htmlOption);
                            tb_init('a.thickbox','tr.thickbox','td.thickbox');//解决动态生成无效的问题
                       }
                 });            
复制代码

注意的一点事,这段代码,一定要放到$('.shownotice').html(htmlOption);之后,也就是加载到页面中之后,然后绑定事件。

tb_init,是thickbox的初始化方法,入口。

其中a.thickbax,tr.thickbox,td.thickbox

表示给这三类元素绑定事件。

添加之后,果然就可以弹出了。

问题得以解决。


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3217309.html,如需转载请自行联系原作者

相关文章
|
小程序 JavaScript
小程序绑定事件跳转的三种方法
小程序绑定事件跳转的三种方法
200 0
|
5月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
5月前
|
JavaScript 前端开发
定义一个超链接,点击超链接后,执行一段代码,页面不跳转
这篇文章展示了如何在HTML中创建一个超链接,当点击这个超链接时,会执行JavaScript代码(例如弹出一个警告框)而不会导致页面跳转。
|
7月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
8月前
|
C#
25.C#跳转语句的学习
25.C#跳转语句的学习
70 0
|
8月前
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
关于实现点击父元素点击后显示子元素,但点击子元素不消失的方法(阻止事件传递)
56 0
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
41 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
139 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
element 的dialog嵌套问题,第二次弹出的会被遮住,怎么解决?
element 的dialog嵌套问题,第二次弹出的会被遮住解决办法
1331 0
element 的dialog嵌套问题,第二次弹出的会被遮住,怎么解决?

热门文章

最新文章

下一篇
开通oss服务