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

2022-02-09 12:47:05

问题描述：

用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，如需转载请自行联系原作者

码农公寓

相关文章