fancybox 无效 失效 直接打开页面, ajax 之后 fancybox对更新的数据无效,Jquery失效 无效

案例:做个聊天室项目,数据都是通过ajax刷新出来的,而对新数据绑定的fancybox均无效,点击直接打开到了新页面而不是弹窗,解决方法其实很简单

 

简单分析:ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,Ajax后加载的就没有绑定

 

详细分析:我们的   fancybox 使用的时候要写在 jquery的  $(document).ready(function () {})里面,也就是在文档加载完之后,就绑定给了 fancybox  ,但是我们ajax之后出来的数据,已经是在这个文档绑定之后出现的,所以现在你点击是没有用的,因为没有绑定到时间,那么解决方法呢?就是重新绑定一遍写在ajax的success成功之后的里面

 

例如,我这里有个ajax,在成功之后会执行一段代码,在代码的最后一段,我们再重新绑定 fancybox 即可

(也就是页面里面,在$(document).ready(function () {})里面有一个 fancybox的绑定给原来的页面使用,而新的ajax出来的数据,就写在ajax的success成功之后的里面即可,这个时候就不用再写 $(document).ready(function () {}) 了)

 

$("a.showpic").fancybox({
                width: 602,
                height: 421,
                autoScale: false,
                transitionIn: 'none',
                transitionOut: 'none',
                type: 'iframe',
                padding: 0,
                margin: 0,
                hideOnOverlayClick: false,  /*如果不希望点击遮罩层或者是窗口其他的地方就能关闭, 那么这里就设置为false*/
                showCloseButton: false   /*设置右上角的关闭按钮为关闭状态*/

            });

把上面的重新绑定事件, 放到下面的图里面的ajax里面的 success里面,就相当于是重新绑定了新出来的.showpic这个类的fancybox事件了

image

如果是fanxybox是在 UpdatePanel失效呢?参看 http://blog.csdn.net/eiwing/article/details/7090536

如果是 用jquery.fancybox时出现TypeError: loading is undefined 错误:参看http://egomu.com/development/40/

$("#fancybox-tmp").empty();//清除id等于fancybox-tmp下面的子元素
$("#fancybox-loading").empty();//清除id等于fancybox-loading下面的子元素
$("#fancybox-overlay").empty();//清除id等于fancybox-overlay下面的子元素
$("#fancybox-wrap").empty();//清除id等于fancybox-wrap下面的子元素
$("#fancybox-tmp").remove();//删除id等于fancybox-tmp元素
$("#fancybox-loading").remove();//删除id等于fancybox-loading元素
$("#fancybox-overlay").remove();//删除id等于fancybox-overlay元素
$("#fancybox-wrap").remove();//删除id等于fancybox-wrap元素

 

据说还有一种叫做 live方法 的方法,我没有用过,可以参考 jquery的 api 搜索

也可以看看这里

<script type="text/javascript"> 
<!-- 
jQuery(document).ready(function(){ 
jQuery(".brand li img").live('click',function(){ 

jQuery(this).parents("li").find("ul").slideToggle(); 
}); 
}); 
--> 
</script> 
posted @ 2013-08-30 15:35 梨花驿路 阅读(...) 评论(...) 编辑 收藏